ReactNavigation导航入门

去年版本还是4、今年就5了～～！

import 'react-native-gesture-handler';
import React,{createContext, Component, useReducer} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppEntry from  './src/AppEntry'



const App = () => {

  const reducer = (state, action) => {
    switch(action.type){
      default:
        return action
    }
  }
  const [state,dispatch] = useReducer(reducer,{name:"张三",age:123})
  
  return (
    <AppEntry></AppEntry>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default App;

AppEntry

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


function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('ceshi',{name:"路由传值"})}
      />
    </View>
  );
}
const Stack = createStackNavigator();

function AppEntry() {
  return (
  	//该NavigationContainer负责管理你的应用程序状态和您的顶级导航链接到应用环境
    <NavigationContainer>
    	//initialRouteName设置默认导航页面
      <Stack.Navigator initialRouteName="MainNavigator">
      //设置所有路由到路径和页面
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="ceshi" component={ceshi}/>
        //options设置导航标题
        <Stack.Screen name="MainNavigator" component={MainNavigator} options={{ title: 'Overview' }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default AppEntry;

ceshi.tsx

import React,{ useState, useEffect,useContext,createContext } from 'react';
import { StyleSheet, Text, View, Keyboard, Button } from 'react-native';
import {ValueContext} from './../context/ceshi'

const App = ({navigation,route}) => {
    
    useEffect(()=> {
        console.warn("========");
        console.warn(navigation)
        console.warn("========123");
        //接收参数
        console.warn(route)
    }, [false]);
    return (
        <View>
            <Text>asdasd</Text>
            <Button
                title="Go to HomeScreen"
                onPress={() => navigation.navigate('HomeScreen')}
            />
        </View>
    )
}
export default App;

MainNavigator.tsx

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function IconWithBadge({ name, badgeCount, color, size }) {
  return (
    <View style={{ width: 24, height: 24, margin: 5 }}>
      <Ionicons name={name} size={size} color={color} />
      {badgeCount > 0 && (
        <View
          style={{
            // On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
            position: 'absolute',
            right: -6,
            top: -3,
            backgroundColor: 'red',
            borderRadius: 6,
            width: 12,
            height: 12,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
            {badgeCount}
          </Text>
        </View>
      )}
    </View>
  );
}

function HomeIconWithBadge(props) {
  // You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
  return <IconWithBadge {...props} badgeCount={3} />;
}

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

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

const Tab = createBottomTabNavigator();

export default function App() {
  return (
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === 'Home') {
              return (
                <HomeIconWithBadge
                  name={
                    focused
                      ? 'ios-information-circle'
                      : 'ios-information-circle-outline'
                  }
                  size={size}
                  color={color}
                />
              );
            } else if (route.name === 'Settings') {
              return (
                <Ionicons
                  name={focused ? 'ios-list-box' : 'ios-list'}
                  size={size}
                  color={color}
                />
              );
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
  );
}