react-navigation 5.x实现安卓下页面的左右切换

react-navigation 5.x实现安卓下的左右切换

• 直接看代码吧：

import 'react-native-gesture-handler';

import React from 'react';
import { View, Text, StyleSheet, TouchableNativeFeedback } from 'react-native'

// react-navigation
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack'

// Stack
const Stack = createStackNavigator()

// styles
const styles = StyleSheet.create({
  box: {
    flex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxText: {
    color: 'skyblue',
    fontSize: 20
  },
  button: {
    width: 200,
    height: 40,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    borderRadius: 20,
    backgroundColor: 'skyblue'
  },
  buttonText: {
    color: '#fff'
  }
})

// Stack Components
function HomeScreen({ navigation }){
  return (
    <View style={styles.box}>
      <Text style={styles.boxText}>React Native App</Text>
      <TouchableNativeFeedback 
        onPress={()=>navigation.navigate('Settings')}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>Go To Settings</Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  )
}
function SettingsScreen({ navigation }){
  return (
    <View style={styles.box}>
      <Text style={styles.boxText}>Welcome To Settings</Text>
      <TouchableNativeFeedback 
        onPress={()=>navigation.goBack()}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>Go Back To Home</Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  )
}
// HomeStack
function HomeStack(){
  return (
    <Stack.Navigator 
      initialRouteName='Home' 
      screenOptions={{
      	// 添加这一行会实现安卓下页面的左右切换，默认是从下到上
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
      }}
    >
      <Stack.Screen name='Home' component={HomeScreen}></Stack.Screen>
      <Stack.Screen name='Settings' component={SettingsScreen}></Stack.Screen>
    </Stack.Navigator>
  )
}

export default function App(){
  return (
    <NavigationContainer>
      <HomeStack></HomeStack>
    </NavigationContainer>
  )
}