使用反應原生導航與堆棧導航器將數據從屏幕傳遞到其他屏幕

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) 
}