React-Navigation web前端架構

時間 2019-11-29

標籤 react navigation web 前端架構欄目 React 简体版

原文原文鏈接

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組件html

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');

Navigation 官網API地址前端