How to pass text input value as parameter

Asked

Viewed 1,274 times

-1

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

1 answer

0

Good! From what I understand you want to pass the contents of the variable Name to the component Tela2, correct? To pass using React-navigation just do :

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

In Tela2 you will recover as follows :

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

If you read : https://reactnavigation.org/docs/en/params.html you will see that they advise you to use getParam to pick up the parameters and not the direct form this.props.navigation.state.params

Now, if the problem is only the value being passed, by the code you entered, you are playing the value of Asyncstorage in the value variable and if it is not null, taking the value of this.username ( the correct one would be to use this.state.username) and in the code there is no indication of where you are setting the username state.

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.