CNode

由React Native 开发的移动APP,数据接口由 http://cnodejs.org/ 提供

注意

在运行debug模式的apk可能会比较，但是在真机上运行release版本不会出现这种情况

使用教程

1. 三方库列表

   1. color
   2. lodash
   3. mobx
   4. mobx-react
   5. moment
   6. native-base
   7. react-native-easy-toast
   8. react-native-material-menu
   9. react-native-splash-screen
   10. react-native-storage
   11. react-navigation
   12. react-native-camera
   13. react-native-fetch-blob

2. Android APK下载 密码: i9uh

3. 下载项目

   git clone [email protected]:25juan/CNode.git

4. 执行 yarn 命令安装项目运行所需要的包

   yarn

5. 运行程序

   react-native run-ios or react-native run-android

6. 如果想查看真实数据请将CNode/src/store/url.js中的 let dev = true 置为true即可

功能列表

1. 主题列表展示
2. 主题列表详情展示
3. 换肤功能
4. 主题刷新在浏览器中打开
5. 主题刷新、分享、转发功能
6. app 桌面图标
7. 个人资料查看
8. APP启动页
9. 个人登录
10. 退出登录功能
11. 文章发布
12. 图片单击预览功能
13. 主题收藏
14. 杂项

项目截图

Android

IOS

总结

在这一次的开发中，遇到了不少的问题，但是其中也学到了不少的东西，这里做一个记录，方便以后查阅.

Q&A

Q:为什么不用redux 而用 mobx

A:redux对于初学者来说比较复杂，学习曲线比较陡峭。mobx相对比较轻量级点，容易上手，redux含有 中间件的配置，也是比较复杂的。如果把redux比作拖拉机的话，mobx就是跑车。比较适合这种小型项目。不用考虑 太多的东西，所以选择mobx。但是具体选择哪一种根据自己的业务逻辑来进行选择

Q:TabNavigator 嵌套在某组件中，某组件再加入到StackNavigator中，那么TabNavigator

的子组件可以导航到 StackNavigator 里面的组件吗？

A:不能。解决方法，将 StackNavigator 的 navigation 传入到 TabNavigator 的screenProps里面， TabNavigator的子组件可以 调用 this.props.screenProps.navigate("StackNavigator配置的路由")

Q:mobx componentWillReact 第一次没有执行？

A:mobx componentWillReact方法在组件第一次渲染的时候是不会调用的，只有当接受到新的Props 或者 state 改变的时候才会调用。在以后的组件生命周期里面，都会执行componentWillReact，如果组件渲染完成 要执行代码，则可以调用React 的组件生命周期方法componentDidMount

Q:在windows 下进行Android开发的是运行react-native run-android的报错？

A:可以将cmd 切换到 项目名/android 文件夹下，执行gradlew clean,然后再执行react-native run-android

Q:mobx数据改变了没更新UI？

A:mobx数据是响应式的，请确保你的组件加上了 @observer 注解，需要的数据可以通过@inject(需要的数据)来 注入到组件的属性上面。

Q:在使用webview的时候比较慢？

A:在使用webview 的时候，可以先把数据准备好(异步)然后再打开对应画面加载webview, 这样数据回来的时候webview 已经加载了部分css和js资源了。能够提高webview 打开的速度 。但是能够用RN 解决的尽量不用webview,毕竟会影响用户体验性的。

Q:下载 gradle-wrapper.jar 慢 ?

A:将 android\gradle\wrapper\gradle-wrapper.properties 上面的文件通过迅雷下载下来，然后将 distributionUrl 指向本地的文件

Q:ios下配置启动图标和启动屏之后运行react-native run-ios没有生效?

A:删除项目 ios 文件夹下的build 文件夹，当通过xcode 改变了底层的代码的时候，如：app 图标，app 的启动屏应该重新build

Q: 滚动渲染数据列表的时候比较卡?

A:�在渲染长数据列表的时候应该尽量使用FlatList 组件，并且设置initialNumToRender = {10}属性。这样在�页面加载的时候就只会渲染10条数据。在后续的滚动中会执行滚动渲染，不是把所有的数据渲染出来。

Q: FlatList 和react-navigation一起使用很卡?

A:�在渲染数据列表的时候。不要把 FlatList的onEndReachedThreshold的值设置得太大了，设置为1即可。否则会影响整个应用的性能。

Q:低端机运行起来很卡?

A:在低端机中即便是正式版可能会出现运行不流畅的情况，所以就需要性能上面的优化。建议开发的时候用低端机作为开发机。(荣耀6x(卡) VS 荣耀8x(较为流畅))

Q:react-native-camera的坑

A:安装react-native-camera需要翻墙，如果报Could not find com.android.support:support-v4:26.0.1 请求修改 android/build.gradle文件

buildscript {
    repositories {
        jcenter()
        maven { url "https://maven.google.com/" } //添加代码
    }
    ... //其他代码
 }
 ... //其他代码
 allprojects {
     repositories {
         ... //其他代码         
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
          maven { url "https://jitpack.io" } //添加代码
          maven { url "https://maven.google.com/" } //添加代码
     }
 }