android - 当我在 React Native 中按下注册按钮时，屏幕导航到登录屏幕

Question

我有一个注册屏幕，其中包含用户名、全名、电子邮件、密码的文本字段和一个注册 按钮。在注册屏幕的底部，我有一个 已有帐户？登录

现在，如果我填写我的注册详细信息并按下“注册”按钮，它会将我导航回“登录”屏幕。注册按钮应将我导航到主屏幕。

但如果我删除 - 已有帐户？从我的注册屏幕登录，然后注册按钮成功导航到主屏幕。

即使我的代码完全没问题，我也不知道为什么会发生这种情况。 另外，这是否有可能是软键盘重叠的问题？

// Below is my Signup Screen 

export default class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
     fullname: '',
     username: '',
     email: '',
     password: '',
     confirm_password: '',
    };
  }


  signupCall = () => {
       fetch(strings.baseUri+"registration", {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify( {
            "fullname": this.state.fullname,
            "username": this.state.username,
            "email": this.state.email,
            "password": this.state.password,
            "confirm_password": this.state.confirm_password,
            "latitude" : "0",
            "longitude": "0",
            "country": "0",
          } )
          })
          .then((response) =>  response.json())  
          .then((responseJson) => {

            let jsonObj = JSON.parse(JSON.stringify(responseJson));

            if (jsonObj.status=="true") {          
              this.props.navigation.navigate('Tabs');
            } 
             else {
                  alert(jsonObj.message);
                }               
          })
          .catch((error) => {
              console.error(error);
          });
  }

  navigateSIGNIN = () => {
    this.props.navigation.navigate('Signin'); 
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View >
      <MyStatusBar backgroundColor={colors.transColor} barStyle="light-content" />
      <View>
        <ImageBackground  style={styles.top_img}  source={require('../../assets/imgs/bg2.png')}>

          <View style={styles.logoimg_signup}>
            <Image style={styles.logo_text_img} source={require('../../assets/imgs/logo_text.png')}></Image>
          </View>

      <View style={styles.signView}>

          <TextInput style={styles.inputBox}
          placeholder="USERNAME"
          placeholderTextColor= {colors.dividerColor}
          onChangeText={ username => this.setState({username}) }
          />

           <TextInput style={styles.inputBox}
          placeholder="FULL NAME"
          placeholderTextColor= {colors.dividerColor}
          onChangeText={ fullname => this.setState({fullname}) }
          />

           <TextInput style={styles.inputBox}
          placeholder="EMAIL ADDRESS"
          placeholderTextColor= {colors.dividerColor}
          onChangeText={ email => this.setState({email}) }
          />

          <TextInput style={styles.inputBox}
          placeholder="PASSWORD"
          placeholderTextColor= {colors.dividerColor}
          secureTextEntry password={true}
          onChangeText={ password => this.setState({password}) }
          />

           <TextInput style={styles.inputBox}
          placeholder="CONFIRM PASSWORD"
          placeholderTextColor= {colors.dividerColor}
          secureTextEntry password={true}
          onChangeText={ confirm_password => this.setState({confirm_password}) }
          />

          <Text style={styles.dating_nearby}>I AGREE WITH TERMS & CONDITIONS</Text>


              <TouchableOpacity style={styles.buttonSignin} onPress={ this.signupCall }>
                <Text style={styles.sign_btns_txt} >SIGN UP</Text>
              </TouchableOpacity>
        </View>


          <TouchableOpacity style={styles.facebookButton} onPress={() => navigate('Tabs')}>
              <Text style={styles.social_sign_btns_txt}>SIGN UP WITH FACEBOOK</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.googleButton} onPress={() => navigate('Tabs')}>
              <Text style={styles.social_sign_btns_txt}>SIGN UP WITH GOOGLE</Text>
            </TouchableOpacity>

            <Text style={styles.bottomTextLoginSignFor} 
             onPress={ this.navigateSIGNIN  }
              >
              ALREADY HAVE ACCOUNT? 
                <Text style={{color: colors.primaryColor}}> SIGNIN NOW
          </Text>
          </Text>

        </ImageBackground>
      </View>

    </View>
    );
  }
}

样式

    signView: {
      justifyContent: 'center',
      alignItems: 'center',
      width: '80%',
      borderRadius: 5,
      padding:10,
      backgroundColor: colors.whiteColor,
      shadowColor: colors.blackColor,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 5,
      elevation: 5,
    },
 inputBox:{
      textAlign: 'center', 
      width: '80%',
      padding: 5,
      fontFamily: Fonts.MontserratR,
      marginTop: 10,
      fontSize: 16,
      color: colors.blackColor,
    },
 dating_nearby: {
      height:16,
      textAlign: 'center', 
      marginTop:20,
      marginBottom:10,
      color: colors.subTextColor,
      fontSize: 12,
      fontFamily: Fonts.MontserratR,
    },
    buttonSignin:{
      alignItems: 'center',
      justifyContent: 'center',
      height: 45, 
      width: '65%',
      borderRadius: 35,
      fontSize: 16,
      fontFamily: Fonts.MontserratR,
      color: colors.whiteColor,
      backgroundColor: colors.leftColor,
      shadowColor: colors.blackColor,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 5,
      elevation: 3,
    },
 sign_btns_txt: { 
      color: colors.whiteColor,
      fontSize: 16,
      fontFamily: Fonts.MontserratR,
    },
    facebookButton:{
      alignItems: 'center',
      justifyContent: 'center',
      height: 45, 
      width: '50%',
      marginTop: 20,
      borderRadius: 35,
      fontSize: 16,
      fontFamily: Fonts.MontserratR,
      color: colors.whiteColor,
      backgroundColor: colors.facebookColor,
      shadowColor: colors.blackColor,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 5,
      elevation: 3,
    },
    googleButton:{
      alignItems: 'center',
      justifyContent: 'center',
      height: 45, 
      width: '50%',
      marginTop: 10,
      borderRadius: 35,
      fontSize: 16,
      fontFamily: Fonts.MontserratR,
      color: colors.whiteColor,
      backgroundColor: colors.googleColor,
      shadowColor: colors.blackColor,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 5,
      elevation: 3,
    },
social_sign_btns_txt: {
      color: colors.whiteColor,
      fontSize: 12,
      fontFamily: Fonts.MontserratR,
    },
 bottomTextLoginSignFor: {
      height:16,
      textAlign: 'center', 
      marginTop:20,
      marginBottom:20,
      justifyContent: 'center', 
      alignItems: 'center',
      position: 'absolute',
      bottom: 0,
      fontFamily: Fonts.MontserratR,
      color: colors.subTextColor,
      fontSize: 12,
    },

Answer 1

来自 react-native 文档:

The Text element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a are no longer rectangles, but wrap when they see the end of the line.`

所以我相信您的按钮和文本组件之间存在某种重叠。您可以尝试为所有按钮添加背景颜色，以直观地检查是否有重叠。