reactnavigation 5.x简单例子

随着RN和reactnavigation的版本更新，网上很多老版的例子都不能用了。

自己摸索着跑通了一些简单的功能。

使用的是最新的 "react-native": "0.61.5", reactnavigation版本是 5.x ，reactnavigation的官网是https://reactnavigation.org/ 。打开很慢很慢很慢。。。。不过可以参考。

两个页面切换的例子：

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


const Stack = createStackNavigator();

function HomeScreen({navigation}) {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
    />
  );
}



function Profile({navigation}) {
  return (
    <Button
      title="Go to Home"
      onPress={() => navigation.navigate('Home', {name: 'Home'})}
    />
  );
}

export default function App() {
  return (
 <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

简单的tabtab页切换：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

带图标的两个tab导航切换

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

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

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

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>setting screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }}/>
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }}/>
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
    console.log("aaaaaaaaaaaaaaaaaaaaa");
  return (
    <NavigationContainer>
      <Tab.Navigator
       screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
                if(focused){
                 return (
                    <Image style={styles.tabBarIcon} source={require('./img/page1_2.png')}/>
                );
                }else{
                     return (
                    <Image style={styles.tabBarIcon} source={require('./img/page1_1.png')}/>
                );
                }
              
            } else if (route.name === 'Settings') {
                if(focused){
                return (
                    <Image style={styles.tabBarIcon} source={require('./img/page2_2.png')}/>
                );
                }else{
                     return (
                    <Image style={styles.tabBarIcon} source={require('./img/page2_1.png')}/>
                );
                }
             
            }

            // You can return any component that you like here!
            
          },
        })}
        tabBarOptions={{
          activeTintColor: '#2196f3',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeStackScreen}  options={{ headerShown: false }} />
        <Tab.Screen name="Settings" component={SettingsStackScreen}  options={{ headerShown: false }}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});

reactnavigation 5.x简单例子

猜你喜欢