第一种:通过将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来设置标题头为更新!
效果如下
本文地址:https://www.zhuimengzhu.com/details/75.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。