安裝依賴 這個(gè)真難受拔第，依賴太多都蒙圈了
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依賴【安卓還沒有環(huán)境】
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()
//導(dǎo)航欄樣式
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>
一個(gè)普通的頁面 跳轉(zhuǎn)路由方法
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 >
);
}
}
