https://github.com/alimek/react-navigation-custom-bottom-tab-component

react-navigation-custom-bottom-tab-component

自定义导航

//////////////////////////////////////////////////////////

https://blog.csdn.net/qq_14990527/article/details/77151574

react native 的成功离不开优秀的第三方组件，以下是我见过的一些优秀或者有用的RN第三方组件

////////////////////////////////////////

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

cd ios

pod install

跳转页

// In App.js in a new project

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>

      <Button

        title="Go to Details"

        onPress={()=>navigation.navigate('Details')}

      />

    </View>

  );

}

function DetailsScreen({ navigation }) {

    return (

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

        <Text>Details Screen</Text>

        <Button

          title="Go to Details... again"

          onPress={() => navigation.push('Details')}

        />

        <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />

        <Button title="Go back" onPress={() => navigation.goBack()} />

      </View>

    );

  }

const Stack = createStackNavigator();

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator>

      <Stack.Screen name="Home" component={HomeScreen} />

          <Stack.Screen name="Details" component={DetailsScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

export default App;

上面导航

///////////////////////////////////////////////////

下面状态导航

npm install @react-navigation/bottom-tabs

==================================

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>

  );

}