React native 在react native中制作登录表单

我正在尝试使用自定义文本字段创建登录表单。在自定义表单中，并使用该表单详细信息在登录页面中验证用户

自定义文本字段

export default class UserInput extends Component {
 render() {
    return (
      <View style={styles.inputWrapper}>
        <Image source={this.props.source} style={styles.inlineImg} />
        <TextInput
          style={styles.input}
          placeholder={this.props.placeholder}
          secureTextEntry={this.props.secureTextEntry}
        />
      </View>
    );
  }
}

导出默认类UserInput扩展组件{
render（）{
返回(
);
}
}

使用自定义文本字段创建表单

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }

  render() {
    const { onChange, ...rest } = this.props;

    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <UserInput
          source={usernameImg}
          placeholder="Username"

        />
        <UserInput
          source={passwordImg}
          secureTextEntry={this.state.showPass}
          placeholder="Password"

        />

      </KeyboardAvoidingView>
    );
  }
}

导出默认类表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“
};
}
render（）{
const{onChange，…rest}=this.props；
返回(
);
}
}

在登录屏幕中使用表单和其他组件

class SignInScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      isLoading: false
    };

  }
  signIn = async () => {
    console.log("signIn");

    firebase
      .auth()
      .signInWithEmailAndPassword("entered email", "entered password")
      .then(
        () => {
          console.log("then");
          this.moveTohome();
        },
        error => {
          console.log(error, "eroor in login");
        }
      );

    console.log("App");
  };
  moveTohome = async () => {
    console.log("move to home");
    await AsyncStorage.setItem("userToken", this.state.email);
    this.props.navigation.navigate("App");
  };


  render() {
    const changeWidth = this.buttonAnimated.interpolate({
      inputRange: [0, 1],
      outputRange: [myWidth * 0.9, myHeight * 0.08]
    });
    return (
      // <DismissKeyboard>
      <Wallpaper>
        <Form />
        <SignupSection navigation={this.props.navigation} />
        <ButtonSubmit
          onPress={() => {
            this.signIn();
          }}
        />
      </Wallpaper>
      //  </DismissKeyboard>
    );
  }
}

类标志屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“”，
孤岛加载：false
};
}
signIn=async（）=>{
控制台日志（“登录”）；
火基
.auth（）
.使用电子邮件和密码（“输入的电子邮件”、“输入的密码”）登录
.那么(
() => {
console.log（“then”）；
这是moveTohome（）；
},
错误=>{
日志（错误，“登录时出错”）；
}
);
控制台日志（“应用程序”）；
};
moveTohome=async（）=>{
console.log（“移动到主页”）；
等待AsyncStorage.setItem（“userToken”，this.state.email）；
这个.props.navigation.navigate（“应用程序”）；
};
render（）{
const changeWidth=this.buttonAnimated.interpolate({
输入范围：[0，1]，
输出范围：[myWidth*0.9，myHeight*0.08]
});
返回(
// 
{
这个；
}}
/>
//  
);
}
}

我想访问登录屏幕中输入的电子邮件和密码。 我不想使用任何可用的自定义表单。我也不知道该如何保持状态。那么我能做的最简单的方法是什么呢？在应用程序中。

---

我搜索了很多，但没有任何东西对我有用。

如果你想在其他屏幕上访问电子邮件/密码，那么你可以在react导航方法的param对象中发送它们

this.props.navigation.navigate("App",{
     email:this.state.email,password:this.state.password
});

但在这种情况下，这只会发送到应用程序路由，如果您想访问其他页面，则需要再次传递它们

---

另一种方法是将应用程序与Redux连接起来，因为它与React for state management结合使用时效果非常好。

1。我想将数据从子组件传递到其父组件，因此无法使用导航方法。2.是的，我本可以使用redux来完成，但只是想看看是否有其他方法。既然您说需要将数据从子组件传递到父组件，那么您可以做的是添加处理程序onTextChange或一些事件侦听器onChangeText={this.props.updateText}，并在updateText方法的父组件更新状态下添加。