react-navigation 4.x的使用

1. 安裝

先根據文檔進行添加依賴庫

yarn add react-navigation
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens
yarn add react-navigation-stack

然后iOS 版本

cd iOS
pod install

參考官網 : https://reactnavigation.org/docs/en/getting-started.html

使用

class HomeScreen extends React.Component{
    componentDidMount() {
        console.log("HomeScreen_componentDidMount");
    }

    componentWillUnmount() {
        console.log("HomeScreen_componentWillUnmount");
    }
    

  render(){
    return <View>
        <Text>首頁</Text>
        <Button title="跳轉" onPress={()=>this.props.navigation.navigate("detail")}>

        </Button>
    </View>
  }
}

導航生命周期

componentDidMount 頁面被加載的時候調用,類似于iOS里面的initialize方法

componentWillUnmount當頁面出棧的時候被調用, 類似iOS里面的 dealloc方法

屏幕切換

this.props.navigation.navigate("組件路由名字")
this.props.navigation.push("組件路由名字")
this.props.navigation.goBack("組件路由名字")
this.props.navigation.popToTop("組件路由名字")

push : 創(chuàng)建一個新的組件,進行壓棧展示
navigate: 會判斷棧中有沒有這個組件, 如果有則回到那個頁面,如果沒有則創(chuàng)建一個新的組件進行壓棧展示
popToTop : 回到首頁組件
goBack : 返回上一個頁面

頁面之間傳遞參數(shù)
navigationOptions 里面可以設置導航標題 ,也可以使用函數(shù)的方式后去

//方式1:
  static navigationOptions = {
        title : "首頁",
   }

//方式2
static  navigationOptions = ({navigation}) => {
        return {title : navigation.getParam("otherParamsrrr","默認列表")}
    }

this.props.navigation.navigate 方法可以傳遞參數(shù)到下一個頁面

class  HomeScreen extends React.Component{

    static navigationOptions = {
        title : "首頁",
   }

    render(){
        return <View>
            <Text>首頁</Text>
            <Button title="進入列表" onPress={()=>this.props.navigation.navigate("List",{
                "itemId" : 98,"otherParamsrrr" : "列表"
            })}></Button>
        </View>
    }
}

獲取標題 navigation.getParam
在render函數(shù)里面定義 const {navigation} = this.props; 通過navigation進行獲取
也可以通過this.props.navigation.setParams進行動態(tài)修改

class ListScreen extends React.Component{

    static  navigationOptions = ({navigation}) => {
        return {title : navigation.getParam("otherParamsrrr","默認列表")}
    }

    render(){

        const {navigation} = this.props;

        return <View>
            <Text>列表</Text>
            <Button
                title="返回首頁"
                onPress={()=>this.props.navigation.navigate("Home")}></Button>
            <Button title="進入詳情" onPress={()=>this.props.navigation.navigate("Detail")}></Button>
            <Button
                title="更新標題"
                onPress={() => this.props.navigation.setParams({ otherParamsrrr: 'Updated!' })}
            />

            <Text>
                itemId: {JSON.stringify(navigation.getParam('itemId', 'NO-ID'))}
            </Text>
            <Text>
                otherParam:
                {JSON.stringify(navigation.getParam('otherParamsrrr', 'default value'))}
            </Text>
        </View>
    }
}

配置導航欄顏色,標題樣式
對于單個導航可以在當前的組件里面通過navigationOptions 配置headerStyle,headerTintColor,headerTitleStyle

class  HomeScreen extends React.Component{

    static navigationOptions = {
        title : "首頁",
        headerStyle: {
            backgroundColor : "red"
        },
        headerTintColor : "blue",
        headerTitleStyle : {
            fontSize : 30
        }

    }

    render(){
        return <View>
            <Text>首頁</Text>
            <Button title="進入列表" onPress={()=>this.props.navigation.navigate("List",{
                "itemId" : 98,"otherParamsrrr" : "列表"
            })}></Button>
        </View>
    }
}

也可以在createStackNavigator里面進行全局配置

const APPNavigator = createStackNavigator({
    Home : {
        screen : HomeScreen,
    } ,

    List : {
        screen : ListScreen,
    },

    Detail : {
        screen: DetailScreen,
    },

},{

    initialRouteName: 'Home',
    defaultNavigationOptions : {
        headerStyle: {
            backgroundColor: "red"
        },
        headerTintColor: "blue",
        headerTitleStyle: {
            fontSize: 30
        },
    }
});

最后編輯于：2019.10.30 16:24:14

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者