react native CNode APP
由React Native 开发的移动APP,数据接口由 http://cnodejs.org/ 提供
注意
在运行debug模式的apk可能会比较，但是在真机上运行release版本不会出现这种情况
使用教程
-
三方库列表
- color
- lodash
- mobx
- mobx-react
- moment
- native-base
- react-native-easy-toast
- react-native-material-menu
- react-navigation
-
下载项目
git clone [email protected]:25juan/CNode.git -
执行 yarn 命令安装项目运行所需要的包
yarn -
运行程序
react-native run-iosorreact-native run-android -
如果想查看真实数据请将
CNode/src/store/url.js中的let dev = true置为true即可
功能列表
主题列表展示主题列表详情展示换肤功能主题刷新在浏览器中打开主题刷新、分享、转发功能app 桌面图标个人资料查看APP启动页个人登录退出登录功能文章发布- 图片单击预览功能(待完成)
- 主题收藏(待完成)
- 杂项(待完成)
项目截图
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
年末了，如果你觉得本文章对你有帮助，请帮作者star。作者是前端小白一名。如果有写错的地方请指正，谢谢！ 传送门
TabNavigator 那个地方你可以参考一下 GitPoint 的做法 , 每个 TabNavigator的 Item也是一个StackNavigator, 公共部分页面分别导入到每个Item下. 总之要使用的页面都要压入到 Stack中, 但是这样配置好以后,就不再动了.
看下面关键代码
代码 gitpoint routes
const HomeStackNavigator = StackNavigator(
{
Events: {
screen: EventsScreen,
navigationOptions: {
headerTitle: 'GitPoint',
},
},
...sharedRoutes, //公共页面部分 //其他 Tab处理方法相同
},
{
headerMode: 'screen',
}
);
const MainTabNavigator = TabNavigator(
{
Home: {
screen: HomeStackNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
color={tintColor}
name="home"
size={33}
/>
),
},
},
Notifications: {
screen: NotificationsStackNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<NotificationIcon iconColor={tintColor} />
),
},
},
Search: {
screen: SearchStackNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
color={tintColor}
name="search"
size={33}
/>
),
},
},
MyProfile: {
screen: MyProfileStackNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
containerStyle={{ justifyContent: 'center', alignItems: 'center' }}
color={tintColor}
name="person"
size={33}
/>
),
},
},
},
{
lazy: true,
tabBarPosition: 'bottom',
tabBarOptions: {
showLabel: false,
activeTintColor: colors.primaryDark,
inactiveTintColor: colors.grey,
style: {
backgroundColor: colors.alabaster,
},
},
tabBarComponent: ({ jumpToIndex, ...props }) => (
<TabBarBottom
{...props}
jumpToIndex={index => {
const { dispatch, state } = props.navigation;
if (state.index === index && state.routes[index].routes.length > 1) {
const stackRouteName = [
'Events',
'Notifications',
'Search',
'MyProfile',
][index];
dispatch(
NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: stackRouteName }),
],
})
);
} else {
jumpToIndex(index);
}
}}
/>
),
}
);
export const GitPoint = StackNavigator(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
},
},
Welcome: {
screen: WelcomeScreen,
navigationOptions: {
header: null,
},
path: 'welcome',
},
Main: {
screen: MainTabNavigator,
navigationOptions: {
header: null,
},
},
},
{
headerMode: 'screen',
URIPrefix: 'gitpoint://',
cardStyle: {
backgroundColor: 'transparent',
},
}
);
@phpsmarter 初始设计我也是这么设计的，但是考虑到换肤功能，如果这样用了就必须要用一个函数来动态配置tabnavigation的字体颜色什么的，这样页面渲染的时候每次都要执行这个函数，就会导致整个APP重新初始化，当前画面会自动关闭。会影响用户体验的。至于文章内容解析后面我会继续写文章讲解的。