2017-05-22 45 views
1

我从一个屏幕导航到画面B ..然后导航回到屏幕使用如何在导航到前一个屏幕时传递参数?

this.props.navigation.goBack(null); 

我想知道我们如何可以传递参数,而这样做?

这里是我的代码

import React, { Component } from 'react'; 
import { View, Text, TextInput, ScrollView } from 'react-native'; 
import Card from './Card'; 
import CardSection from './CardSection'; 
import MyButton from './MyButton'; 


class Settings extends Component{ 
constructor(props){ 
super(props); 
this.state = { 
    ip:'', 
    port:'' 
}; 
} 

onSaveClick() { 
console.log('Button clicked'); 
this.props.navigation.goBack(); 
} 
render(){ 
const { input, container } = styles; 
return(
    <View style = {container}> 
    <Card> 
    <CardSection> 
    <TextInput 
     style = {input} 
     onChangeText = {(ip) => this.setState({ip})} 
     placeholder = "IP Address" 
     autoCapitalize = "none" 
     autoCorrect = {false} 
     keyboardType = "numeric" 
    /> 
    </CardSection> 
    <CardSection> 
     <TextInput 
     style={styles.input} 
     onChangeText={(port) => this.setState({port})} 
     placeholder="Port Number" 
     autoCapitalize="none" 
     autoCorrect={false} 
     keyboardType = "numeric" 
    /> 
    </CardSection> 
    <CardSection> 
     <MyButton onPress ={this.onSaveClick.bind(this)}> 
     Save 
     </MyButton> 
    </CardSection> 
    <View> 
    </View> 
    </Card> 
    </View> 
); 
} 
} 

所以,我怎么能够管理在以前的组件来访问该组件的状态。我们可以通过状态作为参数吗?

回答

2

你应该依照Redux的方法

由于通过状态/信息返回从子组件到父组件(第二屏幕到第一屏幕)是一种不好的设计图案,因为这将创建数据流的多条路径在使它很难调试的应用程序中。

如何终极版帮助是

  1. 当提交你把数据放到一个全局存储的点击。(基本上派遣一个动作,并使用减速器来更新全球Redux的商店)

  2. 导航回到前一个屏幕。

  3. 通过连接(来自react -redux软件包)列出上一页中的更改并反映更改。

您可以使用节点包react-redux。

,并跟进从这里的例子 - >http://redux.js.org/docs/basics/ExampleTodoList.html

更多有用的例子here

+0

谢谢。详细解释。我一定会期待遵循这种设计模式。 – hrushilok

+0

但至今为止,我的应用只有两个屏幕。所以我想出了没有Redux的方法。我传递一个回调来更新状态作为导航参数到第二个屏幕。并通过它更新以前的组件的状态。由于我的应用只有两个屏幕,我认为这没关系。 – hrushilok

相关问题