react-navigation 5.x实现安卓下的左右切换
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, TouchableNativeFeedback } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack'
const Stack = createStackNavigator()
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'
}
})
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>
)
}
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>
)
}