当文本输入和提交按钮都在 React Native 中的不同 js 文件中时,如何在单击提交时进行空检查并导航到新屏幕?

恶作剧
render(){
  return (
    <ImageBackground
      source={require('../images/back02.png')}
      style={styles.bgscreen}
    >
    <KeyboardAvoidingView behavior='position'>
      <Image
        style={styles.headImage}
        source={require('../images/login_img.png')}
      />
      <ImgBack/>
      </KeyboardAvoidingView>
      <BottomButton navigation={this.props.navigation} />
    </ImageBackground>
  );}
}

ImgBack包含用户名和密码文本输入。BottomButton包含提交按钮

单击提交按钮时,我想导航到新活动。导航到新屏幕工作正常,但在导航之前,我想空检查打开的 TextInput

我是 React-Native 的新手。在这里完成初学者。我什至想知道该怎么做。帮助。

ImgBack.js 文件

class imgBack extends React.Component  { 

    constructor()
    {
      super();
      this.state = { hidePassword: true }
    }

    managePasswordVisibility = () =>
    {
      this.setState({ hidePassword: !this.state.hidePassword });
    }
    usernameValidate = (EnteredValue) =>{

        var TextLength = EnteredValue.length.toString();
        if(TextLength == 10 ){
          Alert.alert("Sorry, You have reached the maximum input limit.")
        }
        else if(TextLength == 0){
          Alert.alert("Username can't be blank")
        }
      }

      passValidate = (EnteredValue) =>{

        var TextLength = EnteredValue.length.toString();
        if(TextLength == 10 ){
          Alert.alert("Sorry, You have reached the maximum input limit.")
        }
        else if(TextLength == 0){
          Alert.alert("Username can't be blank")
        }
      }

    render(){
        return (
        <ImageBackground resizeMode='contain'
            source={require('../images/login_back.png')}
            style={{
                marginHorizontal: 10,
                height: 290,
                padding: 30,
            }}>

            <View style={
                styles.textInputContainer
            } >
                <TextInput
                    placeholder="Username"
                    underlineColorAndroid = "transparent"
                    placeholderTextColor="#000000"
                    maxLength={10}
                    onChangeText={ EnteredValue => this.usernameValidate(EnteredValue) }
                />
            </View>

            <View style = { styles.textInputContainer }>
                <TextInput
                onChangeText={ EnteredValue => this.passValidate(EnteredValue) }
                underlineColorAndroid = "transparent"
                secureTextEntry = { this.state.hidePassword }
                placeholder="Password"
                placeholderTextColor="#000"
                />
                    <TouchableOpacity style = { styles.visibilityBtn } onPress = { this.managePasswordVisibility }>
                        <Image source = { ( this.state.hidePassword ) ? require('../images/eye_close_icon.imageset/eye_close_icon.png') : require('../images/eye_icon.imageset/eye_icon.png') } style = { styles.btnImage } />
                    </TouchableOpacity>
            </View>
        </ImageBackground>
    )
}
} ```

**Bottombutton File**

类底部按钮扩展组件{

render(){
    return (
    <ImageBackground
        style={{ height: 80, marginLeft: '20%', marginTop: 10 }}
        resizeMode={'center'}
        source={require('../images/btn_back.png')} >
        <TouchableOpacity
        onPress={ this.login }  >
            <Text style={{ textAlign: 'center', marginTop: 25 }}>Submit & SYNC</Text>
        </TouchableOpacity>
    </ImageBackground>
)

} }

导出默认底部按钮;``

恶作剧

解决方案:

constructor(props) {
    super(props);
    this.state = {
      hidePassword: true,
      username: '',
      password: '',
    };
  }

  validUserPass = async () => {
    try {
      if (this.state.username === '') {
        Alert.alert('Username is required !');
      } else if (this.state.password === '') {
        Alert.alert('Password is required !');
      } else {
        this.props.navigation.navigate('selectEmoji');
      }
    } catch (error) {
      console.warn(error);
    }
  };

它帮助我解决了我的问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章