由于公司業(yè)務(wù)需要，最近開始學(xué)習(xí)React Native相關(guān)知識(shí)，RN總體來說對(duì)于零基礎(chǔ)的人還是不太友好，初期總能碰到一堆配置問題，讓人摸不著頭腦，因此本文將總結(jié)一下我在最近學(xué)習(xí)中所碰到的坑。

新建工程中遇到的坑

• JDK版本
  react native目前需要的版本必須小于1.9，之前mac上安卓的是jdk 10，然后運(yùn)行demo工程一直報(bào)連不上設(shè)備，查了半天不知道什么原因……
  錯(cuò)誤：Could not initialize class com.android.sdklib.repository.AndroidSdkHandler
• Gradle版本
  新建工程的gradle版本可能不是你目前已經(jīng)安裝過的版本，因此需要手動(dòng)在android文件夾下的build.gradle中修改gradle版本
• 真機(jī)調(diào)試端口設(shè)置
  連真機(jī)調(diào)試，首先確保你的電腦和手機(jī)設(shè)備在同一個(gè)Wi-Fi環(huán)境下，然后需要配置一下端口
  cmd: adb reverse tcp:8081 tcp:8081
  參考文章：https://blog.csdn.net/xsl_bj/article/details/50417735

開發(fā)過程中遇到的坑

• 常見問題
  新版RN沒有index.android.js和index.ios.js 而是index.js
  錯(cuò)誤：unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
  每次修改代碼需要重新打包，這個(gè)比較麻煩
  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跳轉(zhuǎn)需要使用該組件
  官網(wǎng)鏈接：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;


//跳轉(zhuǎn)調(diào)用
this.props.navigation.navigate('GoodsScene')

• Flex布局
  RN使用flex布局，因此沒有前端基礎(chǔ)的同學(xué)需要多找一些flex布局的文章來學(xué)習(xí)，并且要多實(shí)踐
  參考鏈接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html