根据我的项目需要，其实我需要一个很简单的APP应用，但就是这样一个简单的APP应用，我却耗费了大量时间和精力，因为，坑实在太多了，我就把我遇到的坑写出来做个记录。
二、APP开发
我项目需要以下的页面
一、主界面
二、登录
三、个人中心
四、list
五、detail
由于APP与web不一样，所以没有URL的概念，相对应的是导航器，初入RN，也没有使用原生的navigator组件，而是经大神推荐查看了ant-design的组件Demo，依葫芦画瓢使用了 navigation组件。
1）Navigation组件
首先我们需要安装 react-native-navigation
npm i -g react-navigation --save
注意，在ios下，所有安装的npm包，都要yarn一下，主要是依赖的问题，否则会提示 安装成功，但依赖失败错误
命令：
yarn add react-native-navigation
安装后，我们就可以使用了
navigation有很丰富的功能，具体可以到 https://reactnavigation.org/docs/navigators/ 查看文档
而我项目只需要使用到 StackNavigator 而没有TabNavigator/DrawerNavigator导航，所以我只介绍 StackNavigator 和导航切换的方法
引入navigation组件
import { StackNavigator,TabNavigator,NavigationActions } from 'react-navigation';
配置导航
import Login from './Login' // 其他场景
const FirstApp = StackNavigator({
IndexScreen: {
screen: IndexScreen, // initialRouteName: 'IndexScreen' navigationOptions:({ navigation })=>({
//headerTitle: '导航标题',headerLeft: () 可以设置 headerTitle headerLeft headerRight等，具体参考官方文档
})
},
// 其他场景: {screen: 场景名称},
Login:{screen: Login},
......
},
{
// ....这里是其他公共配置
// 例如 initialRouteName navigationOptions等，具体参考官方文档或网上的navigation的配置资料
});
在Component中也可配置navigationOptions
static navigationOptions = ({navigation, screenProps}) => ({
headerTitle: '导航标题'
});
请注意，navigationOptions的配置优先级为：
StackNavigator中的navigationOptions < Component中的navigationOptions < StackNavigator中的Screen的配置
会按优先级进行覆盖
然后是将组件加入APP的component
在registerComponent的component中
render() {
return (
<FirstApp style={{backgroundColor:'#ffffff'}} ref={nav => { this.navigator = nav; }} />
)
}
至此，navigation就配置完成，那么对应的支持的方法分为几种
第一种，是常用的在子组件中调用
可以通过
this.props.navigation.navigate('Screen Name',{...params});
进行跳转或
this.props.navigation.goBack();
进行返回
第二种，在StackNavigator中的navigationOptions中使用
navigationOptions: ({navigation})=>({
//...在headerLeft等组件的onPress方法中 ()=>{
// navigation.goBack();
// 或
// navigation.navigate('Screen Name',{...params});
// }
// 请注意，在这里需要用到 TouchableOpacity 组件包括按钮，touchablehighlight会报错，请注意
});
还有一个特别值得注意的是，当你只有headerRight时，需要设定headerLeft为一个空的view，否则，会导致标题无法居中
headerLeft: (
<View style={{height: 44,width: 55,paddingRight:15} }/>
)
第三种，在registerComponent 中调用导航方法，这里主要是我使用了极光PUSH所以会在监听时调用导航器，通过控制台打印this对象发现了这个方法
this.navigator._navigation.navigate('Screen Name',{...params});
或
this.navigator._navigation.goBack();
至此，Navigation教程完成，相信你能配置一个符合你的导航器
2) 登录权限验证
然后就是User登录判断，我的需求是需要用户登录，那我APP就需要判断，而又不应该使用cookie来进行处理，查阅了资料后，发现用户登录状态判断代码，但有错误，会导致bundle报错，所以我对此进行了修正
首先我们需要一个本地储存引擎，我这里使用的是react-native-storage
用上面的npm方法进行安装
npm i -g react-native-storage --save
yarn add react-native-storage
资料上说官方并不推荐直接使用storage，所以我按教程封装了一个storage方法放在storageUtil.js
var storage = new Storage({
// 最大容量，默认值1000条数据循环存储
size: 1000,
// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中，重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
defaultExpires: null,
// 读写时在内存中缓存数据。默认启用。
enableCache: true,
// 如果storage中没有相应数据，或数据已过期，
// 则会调用相应的sync方法，无缝返回最新数据。
// sync方法的具体说明会在后文提到
// 你可以在构造函数这里就写好sync的方法
// 或是写到另一个文件里，这里require引入
// 或是在任何时候，直接对storage.sync进行赋值修改
//sync: require('./sync') // 这个sync文件是要你自己写的
})
// 然后设置全局对象，由于我是APP所以不存在web 轻应用，所以不需要用window.storage = storage;而是global.storage = storage;
global.storage = storage;
设置好后，我需要一个Global.js来判断当用户打开APP时是否登录
//用户登录数据
global.user = {
loginState:'',//登录状态
userData:'',//用户数据
};
//刷新的时候重新获得用户数据
storage.load({
key: 'loginState',
}).then(ret => {
global.user.loginState = true;
global.user.userData = ret;
}).catch(err => {
global.user.loginState = false;
global.user.userData = '';
})
然后在registerComponent中import这两个包，就完成了用户的验证
注意：但实际情况却是，storage.load安卓下并未触发，我并不清楚这是什么情况引起的，但IOS下又触发了，并且调试并未出现错误，所以我大胆猜测是import的时候，并未初始化完成storage，导致load方法并未实际执行，可能这涉及到RN本身的机制，所以我又想了一个办法，我封装了一个SUser.js的全局方法，在每个组件的componentWillMount中进行验证，当global.user.loginState==false时我就执行清除用户数据并返回登录界面
import JPushModule from 'jpush-react-native';
var Suser = {
phone:null,
checklogin:function(t){
if (!global.user.loginState) {
storage.load({
key: 'loginState'
}).then(ret => {
global.user.loginState = true;
global.user.userData = ret;
global.user.phone = ret.phone;
}).catch(err => {
JPushModule.clearAllNotifications();
global.user.loginState = false;
global.user.userData = '';
t.navigate('Login');
})
}
},
logout:function(t){
storage.remove({
key: 'loginState'
});
global.user.loginState = false;
global.user.userData = '';
JPushModule.clearAllNotifications();
t.navigate('Login');
}
}
global.Suser = Suser;
这样，就解决了用户登录判断，虽然方法很笨，但有效，如有大神有更好的方法，请联系我，感激不尽！！！
还有注意：当你在chorme中查看console时，发现app init了2次或更多，导致所有事件都会执行两次，例如alert，那么只是模拟器问题，关闭APP，重新启动就好了，原因我不清楚，偶尔会出现重复2次或3次或4次，调试了很久也没解决，正式包不存在这个问题，问了大神也不清楚，代码并未有问题。
