React-Navigation web前端架構
摘要：
React-Navigation
前端架構
準備
/*安裝元件*/
npm install --save react-navigation
npm install --save react-native-gesture-handler
/...
React-Navigation
前端架構
準備
/*安裝元件*/ npm install --save react-navigation npm install --save react-native-gesture-handler /*新增依賴*/ react-native link react-native-gesture-handler
tips
如果是通過react-cli 腳手架打包的工程可能出現安裝時缺少依賴，我的根據官網上教程指導，就出現這個問題。 問題： bogon:AwesomeProject fandong$ npm install -g react-navigation npm WARN react-navigation@3.8.1 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation@3.8.1 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/native@3.4.1 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/native@3.4.1 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/native@3.4.1 requires a peer of react-native-gesture-handler@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-tabs@1.1.2 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-tabs@1.1.2 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-drawer@1.2.1 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-drawer@1.2.1 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-drawer@1.2.1 requires a peer of react-native-gesture-handler@^1.0.12 but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/core@3.3.1 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-stack@1.3.0 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-stack@1.3.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN react-navigation-stack@1.3.0 requires a peer of react-native-gesture-handler@^1.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-native-screens@1.0.0-alpha.22 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-native-screens@1.0.0-alpha.22 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN react-native-safe-area-view@0.13.1 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-native-safe-area-view@0.13.1 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN react-native-tab-view@1.3.4 requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN react-native-tab-view@1.3.4 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. 提示缺少： react@* react-native@* react-native-gesture-handler@* 這可能是由於版本3.X導致的，官網也有相應的提示。 如：Since react-navigation@3.x depends on the new React.createContext API, which is added in react@16.3.x, we will require react-native@^0.54.x. Also, react-navigation@3.x needs react-native-gesture-handler to work, you will need to make sure that the version of react-native-gesture-handler you are using matches your current react-native version. 根據提示 npm install --save react@* ,等等即可。
導航API
basic: 頂部導航條 1> createStackNavigator uage: createStackNavigator({ Home: { screen: HomeScreen } ) 引數： Home: 自定義物件， screen: 顯示的物件，這裡我定義了的一個HomeScreen
HomeScreen元件
import React, { Component } from 'react'; import {View, Text,Button, Alert} from 'react-native'; import styles from '../basic/style'; class HomeScreen extends Component { static navigationOptions={ headerTitle:<Text>'uuu'</Text>, headerRight:( <Button onPress={()=>Alert.alert("hehe")} title="Info" color="blue" /> ) }; componentWillMount(){ //Alert.alert("Will Mount... Home"); } componentWillUnmount(){ //Alert.alert("Unmount Home"); } render() { return ( <View style={styles.container}> <Text>Home Screen</Text> <Button title="touch me" onPress={()=>this.props.navigation.navigate('Details',{ id:'home1', other:'done' })} > </Button> <Button title="touch me" onPress={()=>this.props.navigation.navigate('ModalScreen',{ id:'home1', other:'done' })} > </Button> </View> ); } } export default HomeScreen;
導航函式
在React Native 開發中，每個元件props 會引入navigation 這個元件物件，常用的函式有; navigate(<componentName>,{params/*option*/}) push(<componentName>,{params/*option*/}) 區別： 這個函式使用都能通過this.props.navigation.navigate('Details') 到對應的介面。如果當前的介面就是Details 時，使用navigate 不在出現切換介面的效果，即不會導航。 push不同，push會把這個Details 繼續入棧，想下web 中，訪問的網頁歷史記錄。
傳參、新增引數、去引數
navigate(<componentName>,{params/*option*/}) push(<componentName>,{params/*option*/}) 第二引數即。 新增引數 setParam(key,value) 去引數： getParam(key,defaultValue) 第二個有個預設值需要注意下。
導航模式
默然是左右切換載入 ，第二種為 modal 即上下載入。 const AppNavigator = createStackNavigator({ Home:{ screen: HomeScreen, navigationOptions: () => ({ title: '首頁' }) }, Details:{ screen:DetailScreen, navigationOptions:({navigation})=>{ return {title: navigation.getParam("id","no-id")}; } }, ModalScreen:{ screen:ModalScreen, navigationOptions:()=>({ title:'Modal' }) } },{ initialRouteName:"Home", mode:'modal', //headerMode:'none' }); const AppContainer=createAppContainer(AppNavigator);
導航的生命週期
元件跳轉當前介面A，表示A 入棧，會觸發 元件的生命週期即 componentWillMount 事件觸發，如果從A 切換到B，不會觸發A 的componentWillUnMount 事件，B的componentWillMount 觸發，但是B 切換到A時，B會觸發componentWillUnMount。應為A並沒有出棧。
導航的樣式調整
/*自定義導航頭*/ static navigationOptions = { headerTitle: <LogoTitle />, headerRight: ( <Button onPress={() => alert('This is a button!')} title="Info" color="#fff" /> ), };
其他導航API
createBottomTabNavigator ：同第一個 createDrawerNavigator usage： static navigationOptions = { drawerLabel: 'Home', drawerIcon: ({ tintColor }) => ( <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; createSwitchNavigator usage: const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen }); const AuthStack = createStackNavigator({ SignIn: SignInScreen }); export default createAppContainer(createSwitchNavigator( { AuthLoading: AuthLoadingScreen, App: AppStack, Auth: AuthStack, }, { initialRouteName: 'AuthLoading', } )); -- AuthLoadingScreen 中呼叫：this.props.navigation.navigate(userToken ? 'App' : 'Auth');