安装依赖 这个真难受，依赖太多都蒙圈了
yarn add
@react-navigation/native @react-navigation/stack
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view
安装iOS依赖【安卓还没有环境】
cd ios & pod install
cd ..
yarn run ios
配置路由容器
//App.js
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator()
//导航栏样式
const navBar = { headerShown: true, headerTintColor: "#fff", headerStyle: { backgroundColor: "red" }}
//App页面层级
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" mode="modal"> //mode = modal 页面切换是modal由下往上
<Stack.Screen name="Mine" component= {Mine} options= {navBar} /> //页面
<Stack.Screen name="Home" component= {Home} options= {{ ...navBar,title:"123"} /> //页面
</Stack.Navigator>
</NavigationContainer>
一个普通的页面 跳转路由方法
class Home extends Component {
push = () => {
this.props.navigation.navigate("Mine")
}
render() {
return (
<Container style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button onPress={this.push}>
<Text>Go to Details</Text>
</Button>
</Container >
);
}
}
