如何将表单数据传递到本机反应的另一个页面？

Question

我创建了一个这样的登录页面：

class Login extends Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.container1}>
            <TextInput
              style={{ width: 190, color: 'white' }}
              placeholder="User Name"
              placeholderTextColor="#f9f9f9"
              underlineColorAndroid="#f9f9f9"
            />
            <TextInput
              placeholder="Password"
              secureTextEntry
              returnKeyType="go"
              ref={input => (this.passwordInput = input)}
              style={{ width: 190, color: 'white' }}
              placeholderTextColor="#f9f9f9"
              underlineColorAndroid="#f9f9f9"
            />

            <TouchableOpacity style={{ top: 10 }}>
              <Button
                color="#314561"
                onPress={() => navigate('HomePage')}
                title="Login"
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}
export default Login

现在我需要将用户名传递给主页。我参考了许多资源，但没有找到任何解决方案。如何将用户名传递到主页？

Answer 1

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userName:"",
      password:""
    };
  }
  updateUserName = (name) =>{
     this.setState({
      userName:name,
     })
  }
  updatePwd = (pwd) =>{
     this.setState({
      password:pwd,
     })
  }   
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.container1}>
            <TextInput
              style={{ width: 190, color: 'white' }}
              placeholder="User Name"
              placeholderTextColor="#f9f9f9"
              underlineColorAndroid="#f9f9f9"
              onChangeText={(name) => this.updateUserName(name)}
              value={this.state.userName}               
            />
            <TextInput
              placeholder="Password"
              secureTextEntry
              returnKeyType="go"
              ref={input => (this.passwordInput = input)}
              style={{ width: 190, color: 'white' }}
              placeholderTextColor="#f9f9f9"
              underlineColorAndroid="#f9f9f9"
              onChangeText={(pwd) => this.updatePwd(pwd)}
              value={this.state.password}   
            />

            <TouchableOpacity style={{ top: 10 }}>
              <Button
                color="#314561"
                onPress={() => navigate('HomePage',{userName:this.state.userName})}
                title="Login"
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}
export default Login

文件：homePage.js

  constructor(props) {
    super(props);
    const { params } = this.props.navigation.state;
    var data = params.userName;     
    this.state = {
      userName : data
    };
  }

Answer 2

进行以下更改：

在登录组件中：

用户名字段

<TextInput 
          style={{width:190,color:'white'}} 
          placeholder="User Name" 
          placeholderTextColor="#f9f9f9" 
          underlineColorAndroid='#f9f9f9'
          onChangeText=
            {(username)=>this.setState({username})}
/>

按钮：

<TouchableOpacity style={{top:10}}>
        <Button 
          color="#314561" 
          onPress={() => navigate('HomePage'), { username: this.state.username }} 
          title="Login"/>
        </TouchableOpacity>

在主页组件中：

例如render method

  render(){
      const {state} = this.props.navigation;
      console.og(state.params.username)
    }

更新： 在登录构造函数中，初始化state

constructor(){
   super();
   this.state = {};
}

Answer 3

首先使用 onChangeText 将您的输入值保存到一些变量中

<TextInput
value= {this.state.userName}
onChangeText = {(text)=>{
this.setState({userName:text});
}
 />

然后就可以传值了，

<Button 
 onPress={() => navigate('HomePage',{"userName":this.state.userName})} // you can pass objects
  title="Login"
   />

如何将表单数据传递到本机反应的另一个页面？

How to pass form data to another page in react native?

reactjs

react-native

react-navigation