键盘弹出时,不显示表单的粘滞页脚按钮

时间:2017-07-25 16:56:37

标签: react-native react-native-android react-native-ios

我在表单组件中有一个粘性页脚按钮。打开键盘时,此按钮也应位于键盘顶部。我试图在很多方面使用KeyboardAvoidingView,但它没有帮助。

我目前的代码:

  //...
  <View style={styles.container}>
    <Animated.View
      style={[styles.line, { left: this.state.progressBar }]}
    />
    <kHeader
      hasBorderBottom={false}
      left={
        <IconButton
          onPress={onPreviousStep}
          style={styles.backIcon}
          name="back"
          size={20}
        />
      }
    />
    <Animated.View
      style={[styles.body, { left: this.state.stepContainerPosition }]}>
      {React.cloneElement(this.props.children[step], {
        afterSubmit: onNextStep,
        submittedFieldsWithErrors,
        updateFocus,
        shouldWaitAnimationToFocus: true,
      })}
    </Animated.View>

    <FooterButton
      caption={this.props.children[step].props.buttonLabel}
      onPress={this.onSubmit}
    />
  </View>
  //...


const FooterButton = ({ caption, onPress }) =>
  <View style={styles.footer}>
    <SomeButtonComponent
      caption={caption}
      type="primary"
      size="fullWidth"
      style={styles.button}
      onPress={onPress}
    />
  </View>;

const styles = StyleSheet.create({
  footer: {
    flexDirection: 'row',
    flex: 0.2,
  },
  button: {
    alignSelf: 'flex-end',
    position: 'absolute',
  },
});

打开键盘时的当前行为:

Android :页脚按钮显示在键盘顶部,这是预期的行为。但是当关闭闪屏时会显示键盘

的短暂时间

iOS :该按钮不再显示。

如何在键盘顶部实现粘滞按钮?

0 个答案:

没有答案