如何在React Native中将子视图绑定到父视图?

问题:

我已经创建了一个react native应用程序,在那里我创建了一个看起来像这样的登录表单。

enter image description here

但是当我开始输入时,它看起来像这样。

enter image description here

尝试输入时,发送按钮从卡上弹出。如何解决此问题?

这是我的代码外观。

<View style={styles.signInContainer}>
        <Text style={styles.loginFormTitle}>{strings('login.title')}</Text>
        <View style={styles.formContainer}>
          <Formik
            initialValues={{
              mobileNo: '',
              toggle: '',
            }}
            validationSchema={Yup.object({
              mobileNo: Yup.string().required('Mobile number required'),
            })}
            onSubmit={(values, formikActions) => {
              // this._onPress(values);
              setTimeout(() => {
                formikActions.setSubmitting(false);
              }, 500);
            }}>
            {(props) => (
              <View>
                <View>
                  <TextInput
                    style={styles.textField}
                    placeholder={strings('login.mobile')}
                    placeholderTextColor="#bbbbbb"
                    value={props.values.mobileNo}
                    onChange={props.handleChange('mobileNo')}
                    onBlur={props.handleBlur('mobileNo')}
                    keyboardType="numeric"
                  />
                </View>
                {props.touched.mobileNo && props.errors.mobileNo ? (
                  <View style={styles.errorMessage}>
                    <Text style={styles.errorMessageText}>{props.errors.mobileNo}</Text>
                  </View>
                ) : null}
                <View style={styles.togglebuttoncontainer}>
                  <View style={styles.toggleTextView}>
                    <Text style={styles.toggleText}>
                      {strings('login.keep-login')}
                    </Text>
                  </View>
                  <View style={styles.toggleView}>
                    <Switch
                      trackColor={{false: '#dddddd', true: '#c1d6ee'}}
                      thumbColor={{false: '#ffffff', true: '#007aff'}}
                      ios_backgroundColor="#dddddd"
                      // onValueChange={props.handleChange('toggle')}
                      value={props.values.toggle}
                      style={styles.toggle}
                    />
                  </View>
                </View>
                <TouchableOpacity style={styles.sendButton} onPress="">
                  <Text style={styles.sendButtonText}>
                    {strings('login.button-text')}
                  </Text>
                </TouchableOpacity>
              </View>
            )}
          </Formik>
        </View>
      </View>

这就是我设置样式的方式。

const styles = StyleSheet.create({
  signInContainer: {
    backgroundColor: '#f2f2f2',
    flex:0.75,
    // flexDirection: 'column',
    ...elevationShadowStyle(5),
  },
  colempty:{
    flex:0.3,
  },
  signIn: {
    flex: 1,
    // justifyContent: 'center',
  },
  signinView: {
    flex: 1,
    backgroundColor: '#eeeeee',
    flexDirection:'column',
  },
  signinTitleView: {
    alignItems: 'center',
    marginTop: '5%',
  },
  signinTitle: {
    fontFamily: 'Montserrat-Medium',
    fontSize: 20,
    fontWeight: '300',
    fontStyle: 'normal',
    letterSpacing: 2,
    textAlign: 'center',
    color: '#444444',
  },
  loginFormTitle: {
    fontFamily: 'Montserrat-Medium',
    fontSize: 30,
    fontWeight: '200',
    fontStyle: 'normal',
    letterSpacing: 2,
    textAlign: 'center',
    color: '#444444',
    alignItems: 'center',
    marginTop: 30,
  },
  hr: {
    marginTop:-30,
    borderBottomColor: '#c3c3c3',
    borderBottomWidth: 2.0,
    marginRight: 30,
    marginLeft: 30,
  },
  signInBottomContainer: {
    flex:0.1,
    paddingTop:2,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection:'row',
  },
  signInBottomContainerText: {
    fontFamily:'Montserrat-Medium',
    fontSize:18,
    color:'#444444',
    fontWeight:'500',
  },
  textField: {
    marginTop: 40,
    borderBottomColor: '#cccccc',
    fontFamily: 'Montserrat-Medium',
    borderBottomWidth: 2,
    fontSize: 16,
    fontWeight: '500',
  },
  formContainer: {
    marginRight: 30,
    marginLeft: 30,
  },
  togglebuttoncontainer: {
    flex:1,
    marginTop: 35,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 35,
  },
  toggleTextView: {
    flex:3,
    flexDirection: 'column',
  },
  toggleView: {
    flex:1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    paddingTop:23,
  },
  toggleText: {
    fontFamily: 'Montserrat-Medium',
    color: '#575757',
    letterSpacing: 2,
    fontSize: 18,
    fontWeight: '500',
  },
  sendButton: {
    backgroundColor: '#007aff',
    paddingTop: 15,
    paddingBottom: 15,
    alignItems: 'center',
    borderRadius: 50,
    marginTop:25,
  },
  sendButtonText: {
    fontFamily: 'Montserrat-Medium',
    color: '#ffffff',
    fontWeight: '300',
    fontSize: 18,
    textAlign: 'center',
    letterSpacing: 2,
  },
  toggle: {
    transform: [{scaleX: 1.4}, {scaleY: 1.1}],
    elevation:30,
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 4.5},
    shadowOpacity: 0.3,
    shadowRadius: 4,
    marginTop:15,
  },
  signInBottomLinkView:{
    marginLeft:5,
    borderBottomWidth:2,
    borderBottomColor:'#c3c3c3',
  },
  bottomLinkText:{
    fontFamily:'',
    fontSize:18,
    color:'#484848',
    letterSpacing:2,
  },
  errorMessage:{

  },
  errorMessageText:{
    color:'#ff3d3d',
    fontFamily:'Montserrat-Medium',
    fontSize:18,
    marginTop:10,
  }
});



function elevationShadowStyle(elevation) {
  return {
    elevation,
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 0.5 * elevation},
    shadowOpacity: 0.3,
    shadowRadius: 0.8 * elevation,
  };
}

有人可以帮我解决这个问题吗?谢谢。

评论
  • 大老公
    大老公 回复

    这将取决于您如何设置样式。如果视图没有弯曲,则不会随着触摸板输入的出现而更改尺寸。您需要显示如何设置样式以寻求建议。