为什么 KeyboardAvoidingView 没有出现在 React Native App 中？

Question

我有 React Native 应用和 TextInput 组件。目前，我正在尝试实现 KeyboardAvoidingView，当用户输入 TextInput 时出现，但没有任何反应。 KeyboardAvoidingView 没有出现。我更改了行为属性，将绝对位置置于容器中，但 KeyboardAvoidingView 仍然无法正常工作。有人可以解释一下为什么吗？

const styles = StyleSheet.create({
  addTag: {
    alignItems: 'center',
    borderColor: '#DDDDDD',
    borderWidth: WP('0.3%'),
    borderRadius: HP('6.8%'),
    flexDirection: 'row',
    //left: WP('4%'),
    margin: WP('3.5%'),
    minWidth: WP('19%')
  },
  arrowImage: {
    height: HP('1.62%'),
    top: HP('0.55%'),
    width: WP('2.7%')
  },
  backdropContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    flex: 1
  },
  callDurationContainer: {
    alignItems: 'center',
    backgroundColor: '#FAFAFA',
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: HP('8%'),
    width: '100%'
  },
  commentContainer: {
    backgroundColor: 'grey',
    height: HP('15%'),
    width: '100%'
  },
  container: {
    flex: 1
  },
  contactContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    height: HP('11%'),
    justifyContent: 'space-between',
    top: HP('0.4%'),
    width: '100%'
  },
  contactSubContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    width: WP('60%')
  },
  defaultTag: {
    alignItems: 'center',
    borderColor: '#FEDA5A',
    borderWidth: WP('0.3%'),
    backgroundColor: 'rgba(254, 218, 90, 0.6)',
    borderRadius: HP('6.8%'),
    justifyContent: 'center',
    margin: WP('1.2%')
  },
  defaultTagText: {
    fontFamily: 'Roboto-Medium',
    fontSize: HP('2.3%'),
    paddingBottom: HP('0.92%'),
    paddingLeft: WP('4%'),
    paddingRight: WP('4%'),
    paddingTop: HP('0.92%')
  },
  defaultTagsContainer: {
    flexDirection: 'row',
    //flexWrap: 'wrap',
    left: WP('3%'),
    marginRight: WP('3%'),
    top: HP('5%')
  },
  durationSubContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: WP('75%')
  },
  modalContainer: {
    alignSelf: 'center',
    backgroundColor: '#ffffff',

    flexDirection: 'column',
    height: HP('95%'),
    top: HP('28%'),
    width: WP('100%')
  },
  phoneContainer: {
    bottom: HP('0.3%'),
    justifyContent: 'space-between',
    height: HP('6.1%'),
    left: WP('4%')
  },
  phoneStyle: {
    color: '#4F4F4F',
    fontFamily: 'Roboto',
    fontSize: HP('2.2%'),
    left: WP('1%')
  },
  phoneSubContainer: {
    flexDirection: 'row'
  },
  slider: {
    height: HP('4%'),
    //top: HP('9.9%'),
    width: WP('50%')
  },
  shadowStyle: {
    elevation: 24,
    shadowColor: 'rgba(0, 0, 0, 0.7)',

    shadowOffset: {
      width: 0,
      height: 24
    },
    shadowOpacity: 0.58,
    shadowRadius: 16
  },
  tagsContainer: {
    minHeight: HP('24%'),
    width: '100%'
  },
  tagsCounter: {
    width: '100%'
  },
  tagsText: {
    color: '#4F4F4F',
    fontFamily: 'Roboto-Medium',
    fontSize: HP('2.2%'),
    left: WP('4.5%'),
    top: HP('2.5%')
  },
  textDurationStyle: {
    color: '#585858',
    fontFamily: 'Roboto-Medium',
    fontSize: HP('2.2%'),
    right: WP('1%'),
    width: WP('24%')
  },
  thumb: {
    borderRadius: HP('1.01%'),
    height: HP('2.03%'),
    width: WP('3.5%')
  },
  timeStyle: {
    color: 'rgba(79, 79, 79, 0.8)',
    fontFamily: 'Roboto',
    fontSize: HP('2.1%')
  },
  track: {
    height: HP('0.3%')
  },
  userTagsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    top: HP('4%')
  },
  userTagInput: {
    fontFamily: 'Roboto',
    fontSize: HP('2%'),
    paddingLeft: WP('5%'),
    paddingRight: WP('4%')
    //position: 'relative'
  },
  wrapContainer: {
    backgroundColor: 'rgba(254, 218, 90, 0.6)',
    borderRadius: 50
  }
})

const ModalContactCard = props => {
  const {
    addTag,
    arrowImage,
    backdropContainer,
    buttonContainer,
    callDurationContainer,
    commentContainer,
    container,
    contactContainer,
    contactSubContainer,
    defaultTag,
    defaultTagsContainer,
    defaultTagText,
    durationSubContainer,
    modalContainer,
    phoneContainer,
    phoneStyle,
    phoneSubContainer,
    slider,
    shadowStyle,
    tagsContainer,
    tagsCounter,
    tagsText,
    textDurationStyle,
    timeStyle,
    thumb,
    track,
    userTagInput,
    userTagsContainer
  } = styles
  const { callDuration, changeCallDuration, onModalPress, onSubmitEditing, modalVisible, userTag, userTags } = props
  const keyboardAvoidingViewBehaviour = Platform.OS === 'ios' ? 'padding' : null

  return (
    <KeyboardAvoidingView behavior={keyboardAvoidingViewBehaviour} style={container}>
      <Modal
        animationInTiming={600}
        animationOutTiming={600}
        backdropTransitionOutTiming={1000}
        isVisible={modalVisible}
        customBackdrop={<View style={backdropContainer} />}
      >
        <View style={[modalContainer, shadowStyle]}>
          <View style={contactContainer}>
            <TouchableOpacity onPress={console.log('Left icon pressed')}>
              <Ionicons style={{ color: '#4F4F4F', left: WP('8.3%') }} name="md-more" size={HP('5%')} />
            </TouchableOpacity>

            <View style={contactSubContainer}>
              <Ionicons style={{ color: '#E91E63' }} name="md-contact" size={HP('8%')} />
              <View style={phoneContainer}>
                <View style={phoneSubContainer}>
                  <Image source={require('../img/Arrow.png')} style={arrowImage} />
                  <Text style={phoneStyle}>+7(905)-884-23-89</Text>
                </View>
                <Text style={timeStyle}>10:05 Feb 23 at 15:14</Text>
              </View>
            </View>
            <TouchableOpacity onPress={console.log('Right icon presssed')}>
              <Ionicons style={{ color: '#4F4F4F', right: WP('6%') }} name="ios-close" size={HP('8%')} />
            </TouchableOpacity>
          </View>

          <View style={{ backgroundColor: '#0D8B4E', height: HP('0.3%'), width: '100%' }} />

          <View style={callDurationContainer}>
            <TouchableOpacity onPress={console.log('Right icon presssed')}>
              <Ionicons style={{ color: '#4F4F4F', left: WP('4%') }} name="md-pause" size={HP('3.4%')} />
            </TouchableOpacity>

            <View style={durationSubContainer}>
              <Text style={textDurationStyle}>{callDuration}:00 / 10:05</Text>
              <Slider
                style={slider}
                minimumValue={0}
                maximumValue={60}
                minimumTrackTintColor="#FEDA5A"
                maximumTrackTintColor="rgba(0, 0, 0, 0.26)"
                onValueChange={changeCallDuration}
                step={1}
                thumbTintColor="#FEDA5A"
                thumbStyle={thumb}
                trackStyle={track}
                value={callDuration}
              />
            </View>
            <TouchableOpacity onPress={console.log('Right icon presssed')}>
              <Ionicons
                style={{ color: '#4F4F4F', position: 'relative', right: WP('4%') }}
                name="md-folder"
                size={HP('4.2%')}
              />
            </TouchableOpacity>
          </View>

          <View style={tagsContainer}>
            <View style={tagsCounter}>
              <Text style={tagsText}>Tags (2 / 5)</Text>
            </View>
            <View style={defaultTagsContainer}>
              <View style={defaultTag}>
                <Text style={defaultTagText}>Important</Text>
              </View>
              <View style={defaultTag}>
                <Text style={defaultTagText}>Sligthly important</Text>
              </View>
            </View>
            <View style={userTagsContainer}>
              <View style={addTag}>
                <Ionicons style={{ color: '#4F4F4F', left: WP('3%') }} name="ios-add" size={HP('4.2%')} />
                <TextInput
                  onSubmitEditing={onSubmitEditing}
                  placeholder="Add new..."
                  style={userTagInput}
                  value={userTag}
                />
              </View>
              {userTags}
            </View>
          </View>

          <View style={commentContainer}>
            <Text>Comment container</Text>
          </View>
          <View style={buttonContainer}>
            <Text>Button container</Text>
          </View>
        </View>
      </Modal>
    </KeyboardAvoidingView>
  )
}

Answer 1

如果您使用模拟器，您需要在屏幕内按 cmd + k 切换模式

为什么 KeyboardAvoidingView 没有出现在 React Native App 中？

Why KeyboardAvoidingView is not appearing in React Native App?

keyboard

components

tpkeyboardavoiding

react-native