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

2. 使用

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 : 创建一个新的组件,进行压栈展示
navigate: 会判断栈中有没有这个组件, 如果有则回到那个页面,如果没有则创建一个新的组件进行压栈展示
popToTop : 回到首页组件
goBack : 返回上一个页面

页面之间传递参数
navigationOptions 里面可以设置导航标题 ,也可以使用函数的方式后去

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

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

this.props.navigation.navigate 方法可以传递参数到下一个页面

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函数里面定义 const {navigation} = this.props; 通过navigation进行获取
也可以通过this.props.navigation.setParams进行动态修改

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
        },
    }
});