五、react-native路由跳转传递参数

两种传参方式

第一种：通过将params放入对象作为该navigation.navigate函数的第二个参数，将params传递给路径：

this.props.navigation.navigate('RouteName', { / params go here / })

第二种：通过将getParam传递

this.props.navigation.getParam(paramName, defaultValue)

第一种传参

HomeScreen主组件

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen1</Text>
            <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details',{
            itemId: 86,
            otherParam: 'anything you want here',
        })}/>
            </View>
        );
    }
}

DetailsScreen详情组件

接收参数我们用this.props属性

class DetailsScreen extends React.Component {
    render() {
        const { navigation } = this.props;
        const itemId = navigation.getParam('itemId', 'NO-ID');
        const otherParam = navigation.getParam('otherParam', 'some default value');
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
            <Text>itemId: {JSON.stringify(itemId)}</Text>
            <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                <Button
            title="Go to Details… again"
            onPress={() =>
                     this.props.navigation.push('Details', {
                     itemId: Math.floor(Math.random()  100),
                    })
            }
    />
    <Button
        title="Go to Home"
        onPress={() => this.props.navigation.navigate('Home')}
    />
    <Button
        title="Go back"
        onPress={() => this.props.navigation.goBack()}
    />
    </View>
);
}}

通过打印我们看到下面的效果

结果如下

第二种传参

通过this.props.navigation.getParam动态修改当前的标题

DetailsScreen详情组件

class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('data', '默认值'),
        };
    };
render() {
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');
    console.log(itemId)
    console.log(otherParam)
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
            <Button
        title="Go to Details… again"
        onPress={() => this.props.navigation.push('Details', {
                 itemId: Math.floor(Math.random()  100),
                })}
                />
                    <Button
                title="Update the title"
                onPress={() => this.props.navigation.setParams({data: '更新!'})}
                />
                    <Button
                title="Go to Home"
                onPress={() => this.props.navigation.navigate('Home')}
                />
                    <Button
                title="Go back"
                onPress={() => this.props.navigation.goBack()}
                />
                    </View>
                );
    }
}

通过点击button 触发setParams来设置标题头为更新！

效果如下