React Native 学习纪要

由于公司业务需要，最近开始学习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