使用反应原生导航与堆栈导航器将数据从屏幕传递到其他屏幕

Question

你好我是新来的，在反应原生初学者我试图做一个textInput和，我想通过数据（文本输入用户）在其他屏幕上我怎么能做到这一点你能帮助我吗？我使用的反应导航StackNavigator

这里一些我的代码，我的第一类具有TextInput

export default class ParamScreen extends React.Component { 

static navigationOptions = { 
    title: ' Covoit Ulg ', 
    headerStyle:{ backgroundColor: '#66CDAA'}, 
    headerTitleStyle:{ color: '#FFF', alignSelf: 'center'}, 
    titleStyle: {alignSelf: 'center'} 
    }; 



render() { 
    const { navigate } = this.props.navigation; 

    return (
     <View> 
      <InputControl/> 
      <Button onPress = {() => navigate('ParamPass',{TextInput: ''})} 
         kind = 'rounded' 
         type = 'danger' 
         style={btnStyle} 
         marginBottom= '10'>pass data ?</Button> 
     </View>  
    ) 
} 
} 


class InputControl extends React.Component { 
constructor(props) { 
    super(props) 
    this.handleTextInput = this.handleTextInput.bind(this) 
    this.state = {textIn: false} 
} 

handleTextInput() { 
    this.setState({textIn: true}) 
} 
render() { 
    const textIn = this.state.textIn 

    let TextInput = null 
    if (textIn) { 
     TextInput = <UserInput onSelectionChange={this.handleTextInput}/> 
    } 
    return (
     <View> 
      <UserInput textIn={textIn}/> 
      {TextInput} 
     </View>  
    ) 
} 
} 
function UserInput(props) { 
return <TextInput onSelectionChange={props.onSelectionChange}> 
      Test data test data 
      </TextInput> 

}

而这正是我希望我的数据

export default class ParamsData extends React.Component { 


render(){ 

    const {state} = this.props.navigation; 
    console.log("test test" ,this.props.navigation) 
    var textIn = state.params ? state.params.textIn : "<undefined>"; 

    return (
     <View> 
      <Text>Second View: {textIn}</Text> 
     </View> 
    ) 
    } 
} 

感谢因为你的帮助和抱歉我的英语不是最好的，但我正在努力^^（更好的说话然后写作）``

export default class ParamScreen extends React.Component { 

constructor(props) { 
    super(props) 
    this.state = { text: 'Test test'} 
} 

    static navigationOptions = { 
     title: ' Covoit Ulg ', 
     headerStyle:{ backgroundColor: '#66CDAA'}, 
     headerTitleStyle:{ color: '#FFF', alignSelf: 'center'}, 
     titleStyle: {alignSelf: 'center'} 
     }; 

    onSubmit =() => { 
     //whatever you want to do on submit 
     this.props.navigation.navigate('Parampass', {text: this.state.text}) 
    } 

    render() { 
     const { navigate } = this.props.navigation; 

     return (
      <View> 
       <TextInput style={style.input} 
          underlineColorAndroid= 'transparent' 
          onChangeText= { (text) => this.setState({text})} 
          value= {this.state.text} 
          /> 
       <Button onPress = {() =>this.onSubmit()} 
          kind = 'rounded' 
          type = 'danger' 
          style={btnStyle} 
          marginBottom= '10'>pass data ?</Button> 
      </View>  
     ) 
    } 
} 

我试着像这样在第一屏

export default class ParamsData extends React.Component { 

static navigationOptions = ({navigation}) => { 
    return { 
     title: 'Test/${navigation.state.params.text}' 
    } 
} 
constructor (props) { 
    super(props) 
    this.state = { 
     text: this.props.navigation.state.params.text, 
     report: null 
    } 
} 

render(){ 



    return (
     <View> 

      <Text>Second View: {text}</Text> 
     </View> 
    ) 
} 

}

，这是我收到的数据帮助我，请我觉得我很接近

Answer 1

喜朋友我的英文也不是最好的这个代码在这一刻正在工作

第一个屏幕显示，如何用导航发送参数，在这种情况下，我使用NavigationActions。复位，因为我重路由（避免按键回），但在你的情况下

_navigateToHome = (context, data) => { 
     context.navigation.dispatch(NavigationActions.reset(
      { 
       index: 0, 
       actions: [ 
        NavigationActions.navigate({ routeName: 'Home', params: { param: data }, }) 
       ] 
      })); 
    } 

你应该看到PARAM：数据，这正是通PARAM

//Home.js

你应该得到这样的数据：

componentDidMount() { 
    console.warn(this.props.navigation.state.params.param) 
}