Passer les données de l'écran à l'autre écran en utilisant React Native Navigation avec Stack Navigator

Question

Bonjour je suis nouveau ici et débutant dans reac-native j'ai essayé de faire un textInput et, je voudrais passer les données (texte entrer par utilisateur) dans un autre écran comment puis-je le faire pouvez-vous m'aider? J'utilise la navigation StackNavigator réagir

ici une partie de mon code ma première classe avec 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> 

}

et c'est là où je veux que mes données

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

merci pour vous aidez et désolé mon anglais pas le meilleur mais je travaille dessus ^^ (mieux parlant alors écrivant) ``

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

i essayer comme ça dans le premier écran

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

}

et voilà comment je reçois les données me aide s'il vous plaît je sens que je suis très proche

Answer 1

salut amis mon anglais aussi ne pas être le meilleur ce code en ce moment fonctionne

le premier spectacle d'écran, comment envoyer un paramètre avec la navigation, dans ce cas, j'utilise NavigationActions. remise à zéro, parce que je les routes de réinitialisation (éviter le bouton retour), mais en vous cas

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

vous devriez voir : données param, qui est l'endroit où passe

param

//Home.js

vous devriez obtenir des données si:

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