由于公司业务需要，最近开始学习React Native相关知识，RN总体来说对于零基础的人还是不太友好，初期总能碰到一堆配置问题，让人摸不着头脑，因此本文将总结一下我在最近学习中所碰到的坑。
新建工程中遇到的坑
- JDK版本
react native目前需要的版本必须小于1.9，之前mac上安卓的是jdk 10，然后运行demo工程一直报连不上设备，查了半天不知道什么原因……
错误：Could not initialize class com.android.sdklib.repository.AndroidSdkHandler - Gradle版本
新建工程的gradle版本可能不是你目前已经安装过的版本，因此需要手动在android文件夹下的build.gradle中修改gradle版本 - 真机调试端口设置
连真机调试，首先确保你的电脑和手机设备在同一个Wi-Fi环境下，然后需要配置一下端口
cmd: adb reverse tcp:8081 tcp:8081
参考文章：https://blog.csdn.net/xsl_bj/article/details/50417735
开发过程中遇到的坑
- 常见问题
新版RN没有index.android.js和index.ios.js 而是index.js
错误：unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
每次修改代码需要重新打包，这个比较麻烦
cmd：react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ - react-navigation
RN跳转需要使用该组件
官网链接：https://reactnavigation.org/docs/en/custom-navigator-overview.html
示例代码：
//配置Navigator
const Main = StackNavigator({
GoodsScene: {screen: App},
StoreListScene: {
screen: StoreList,
navigationOptions: ({navigation}) => ({
header: null
})
}
},
{
initialRouteName: 'StoreListScene',
headerMode: 'screen'
});
export default Main;
//跳转调用
this.props.navigation.navigate('GoodsScene')
- Flex布局
RN使用flex布局，因此没有前端基础的同学需要多找一些flex布局的文章来学习，并且要多实践
参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
