React-native学习-18---React Navigation导航器跳转页面

几天没写了，解决项目中的小bug。今天主要贴出来：React Navigation导航器跳转页面，供自己和他人参考，
官网具体有详细说明，因为版本常更新：今天是20200905
https://reactnavigation.org/

1.在项目中增加依赖：
npm install @react-navigation/native  //React Native项目中所需的软件包 
npm install @react-navigation/stack  //安装堆栈导航器库
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

app.js代码： 

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <View style={{backgroundColor:'green',height:20}}/>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <View style={{backgroundColor:'green',height:20}}/>
      <Button  
        title="Go to First"
        onPress={() => navigation.navigate('First')}
      />
    </View>
  );
}

function FirstScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>First Screen</Text>
    </View>
  );
}
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>First Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="First" component={FirstScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
 

 不出意外就会显示一个home界面