BottomModal 里有输入框，怎么配合Keyboard

allendongyx commented 5 years ago

https://reactnative.cn/docs/keyboardavoidingview.html#docsNav

需要在Modal里边实现一个文本框，但是Keyboard会遮挡，看到了官方有提供相关的解决方案，如何配合Modal实现呢

allendongyx commented 5 years ago

感谢

allendongyx commented 5 years ago

<Modal
        animationType='slide'
        transparent
        visible={openCommentVisible}
        onRequestClose={() => {
          setOpenCommentVisible(false)
        }}
      >
        <KeyboardAvoidingView
          enabled
          behavior={Platform.os == 'ios' ? position : 'height'}
          style={{
            height
          }}
        >
          <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }} />
          <View style={styles.createView}>
            <View style={styles.createInputView}>
              <TextInput
                autoFocus
                style={styles.createInput}
                value=''
                onFocus={() => {
                  setOpenCommentVisible(true)
                  // createModalRef.current && createModalRef.current.open()
                  // inputRef.current && inputRef.current.focus()
                }}
                placeholder='回复擎天柱'
              />
            </View>
            <View>
              <TouchableOpacity>
                <Text>发布</Text>
              </TouchableOpacity>
            </View>
          </View>
        </KeyboardAvoidingView>
      </Modal>

用官方社区的Modal实现了

Meituan-Dianping / beeshell

BottomModal 里有输入框，怎么配合Keyboard #58