多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
> 头部只只适用于StackNavigator组件。 **1.传值** 在前面例子中,我们创建了类似聊天 app的一个StackNavigator。切换卡左侧是好友列表,右侧是最近聊天。 现在我们点击一个好友,出现聊天界面,并且聊天界面中有从列表中传递过来的参数。 如下的方式可以实现: `this.props.navigation.navigate('Chat', { user: 'Lucy' });` 我们知道 通过props给父组件设置一个值,子组件就可以接收到值。 ~~~ class ChatScreen extends React.Component { render() { const { params } = this.props.navigation.state; return <Text>Chat with {params.user}</Text>; } } ~~~ OK!!这样就完成了传值。 * * * * * **2.设置头部标题** 设置屏幕头部参数。 ~~~ class ChatScreen extends React.Component { static navigationOptions = ({ navigation }) => ({ title: `Chat with ${navigation.state.params.user}`, }); } ~~~ * * * * * **3.为头部右侧添加一个按钮,比如返回,详情等** 然后,我们可以添加一个标题导航选项,让我们可以添加自定义的右按钮。 ~~~ static navigationOptions = ({ navigation }) => { const {state, setParams} = navigation; const isInfo = state.params.mode === 'info'; const {user} = state.params; return { title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`, headerRight: ( <Button title={isInfo ? 'Done' : `${user}'s info`} onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})} /> ), }; }; ~~~