Question

我有一个Modal封装了KeyboardAvoidingView，封装了一些动画组件。其中一个是TextInput，另一个是Button。单击按钮时，键盘首先被隐藏，然后需要再次单击以到达按钮“ onPress”

研究了使用滚动视图包装组件并使用prop keyboardShouldPersistTaps = {'always'}的解决方案，但这不起作用。

  constructor(props) {
    super(props);
    this.paddingInput = new Animated.Value(0);
    this.state = {
        modalVisible: false,
        otherTip: '',
    }
}

  renderHoveringNote = () => {
    const {total, currentTipPercent} = this.props.rootStore.orderStore;
    return (
        <View>
            <KeyboardAvoidingView style={{flex: 1}}>
                <Animated.View style={{
                    marginBottom: this.paddingInput,
                    flex: 1
                }}>
                    <View>
                        <Text>Enter custom amount</Text>
                    </View>
                    <TextInput                  
                        onChangeText={value => {
                            this.setState({otherTip: value})
                        }}
                        autoFocus
                        value={this.state.otherTip}
                    />
                     <Button title='Save'
                      onPress={()=>{
                            ...do some stuff here
                            this.setState({modalVisible: false});
                            Keyboard.dismiss();
                 }}
                </Animated.View>

            </KeyboardAvoidingView>
        </View>
    )
};


  renderOtherTipModal = () => {
    return (
        <Modal
            isVisible={this.state.modalVisible}
           onBackdropPress{()=>this.setState({modalVisible:false})}
            style={{margin: 0, flex: 1}}
            hideModalContentWhileAnimating={true}
        >
            {this.renderHoveringNote()}
        </Modal>
    )
};

单击一次应达到按钮的onPress

Answer 1

弄清楚了-作为Modal的父母，我有一些滚动视图。确保所有父级滚动视图都具有keyboardShouldPersistTaps = {'always'}很重要。添加之后，效果很好。

需要双击以使用KeyboardAvoidingView

1 个答案: