使用react-native-0.61.5, react-navigation 4搭建一個基礎(chǔ)項目

我是剛接觸react-native,然后按照官網(wǎng)的腳手架搭建了項目，通過了真機調(diào)試進(jìn)入了app。算是正式開始寫代碼了。 找資料發(fā)現(xiàn)react-native的頁面跳轉(zhuǎn)是通過reactr-navigation進(jìn)行的,而網(wǎng)上的很多資料都是reactr-navigation3的。 然后跟著做，項目就跑不起來，浪費了很長時間。 最后從官網(wǎng)找了正確的使用方式。下面把步驟列一下。

創(chuàng)建項目
執(zhí)行命令 npx react-native init xxxx

添加react-navigation依賴

yarn add react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

yarn add  react-navigation-stack @react-native-community/masked-view

今天發(fā)現(xiàn)一個問題

2020-02-19 發(fā)現(xiàn)react-navigation 的依賴有些版本更新了。然后創(chuàng)建的項目啟動不了。 我這里把依賴的版本給固定住?？梢詤⒖枷?/p>

yarn add react-navigation@4.1.1
yarn add react-native-reanimated@1.7.0 react-native-gesture-handler@1.5.6 react-native-screens@2.0.0-beta.2 react-native-safe-area-context@0.7.2 react-navigation-stack@2.1.1 @react-native-community/masked-view@0.1.6

測試成果
按照官方提供的文件，復(fù)制過來。

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

然后在index.js指向這個文件

image.png

如果正常的話就可以了。啟動成功。
我是用android設(shè)備測試的。如果你用ios設(shè)備或者版本和我的不一樣。請參照官方文檔

https://reactnavigation.org/docs/zh-Hans/4.x/hello-react-navigation.html