我在表单组件中有一个粘性页脚按钮。打开键盘时,此按钮也应位于键盘顶部。我试图在很多方面使用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 :该按钮不再显示。
如何在键盘顶部实现粘滞按钮?