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 [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/[email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/[email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN @react-navigation/[email protected] requires a peer of react-native-gesture-handler@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] 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/[email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native-gesture-handler@^1.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react-native@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@* but none is installed. You must install peer dependencies yourself. npm WARN [email protected] 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 [email protected] depends on the new React.createContext API, which is added in [email protected], we will require react-native@^0.54.x. Also, [email protected] 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');