How do I pass the text input value as a parameter

Question

How do I pass the text input value as a parameter

Navigation

#1 by (0 votes)

0

export default class Tela1 extends React.Component {
  constructor ( props){
    super  ( props);

    this.state = {
      username : '',
      passaword :  ' ',
    }
  } 

  ComponentDidMount  (){
    this._loadInitialState().done();
  }

  _loadInitialState =  async () =>  {
    var value = await AsyncStorage.getItem ('user');
    if(value !== null){
      const Nome =   this.username;
      this.props.navigation.navigate('Tela2' , Nome);
    }
  }

Login screen

SCREEN 2

render() {
  const params = this.props.navigation.state.params;
  return (
    <ImageBackground source={require('./foto/i1.jpg')} style = {{ width : '100%',height : '100%', flex : 1}} >
    <View style={styles.container}>
    <Header style = {{ backgroundColor : '#ffcc00'}}>
      <Left>
        <Button transparent>
        </Button>
      </Left>

      <Body>
        <Title style  = {{ color : 'black'}}>Top Fit </Title>
      </Body>
      <Right>

      </Right>
    </Header>

    <View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('Tela3',
        {
          texto: "Weverton é um bobão", uri: "https://media.giphy.com/media/mMC2BVxQWd6Ql3oOyI/giphy.gif"
          ,texto2: "LALALALLALAA"
        })}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>Exercicios</Text>
        </View>
      </TouchableHighlight>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('Exercicios')}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>Treino</Text>
        </View>
      </TouchableOpacity>
      <TouchableNativeFeedback
        onPress={() => this.props.navigation.navigate('Meus_dados' ) }>
        <View style={styles.button}>
          <Text style={styles.buttonText} > {params}  </Text>
        </View>
      </TouchableNativeFeedback>
    </View>

react-native

asked by anonymous 06.12.2018 / 17:55

1 answer

Error in the mask and validation of the email field Error reading all the records of a .txt file in C

score 0 · Answer 1

Good! So I understand you want to pass the contents of the Name variable to the Screen2 component, correct? To pass using react-navigation is just to do:

 this.props.navigation.navigate('Tela2' , {Nome});

On Screen2 you will recover as follows:

const Nome = navigation.getParam('Nome');

If you read: link you will find that they advise you to use getParam to get the parameters and not the form direct this.props.navigation.state.params

Now, if the problem is just the value being passed, by the code that you put, you are throwing the AsyncStorage value into the value variable and if it is not null, get the value of this.username (the correct one would be use this.state.username) and in the code there is no indication of where you are setting the username state.