Quantcast
Channel: CNode:Node.js专业中文社区
Viewing all articles
Browse latest Browse all 14821

cnode APP 开发总结(一)

$
0
0

react native CNode APP

由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-navigation
  2. 下载项目

    git clone git@github.com:25juan/CNode.git
  3. 执行 yarn 命令安装项目运行所需要的包

    yarn
  4. 运行程序

    react-native run-ios or react-native run-android
  5. 如果想查看真实数据请将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

ask.jpgdetail.jpgdetail2.jpgjob.jpgjob.jpgmine.jpgshare.jpgtheme.jpguser.jpg

IOS

detail.pngdetail2.pngjob.pngmine.pngshare.pnguser.pngtheme.png

总结

在这一次的开发中,目前已经完成了大部分功能,剩下后续会慢慢完善,在开发过程中遇到了不少的问题,但是其中也学到了不少的东西,这里做一个记录,方便以后查阅.

Q&A

Q: 为什么不用redux 而用 mobx

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

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

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

A: 不能。解决方法,将 StackNavigatornavigation传入到 TabNavigatorscreenProps里面, 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

年末了,如果你觉得本文章对你有帮助,请帮作者star。作者是前端小白一名。如果有写错的地方请指正,谢谢! 传送门


Viewing all articles
Browse latest Browse all 14821

Trending Articles