Question

我正在尝试使用 KeyboardAvoidingView，但我没有得到任何结果。

带有样式组件的样式视图：


export const Container = styled.View({
  backgroundColor: primary,
  flex: 1,
  alignItems: 'center',
});

export const ImageView = styled.View({
  marginTop: 16,
  alignItems: 'center',
  justifyContent: 'center',
});

export const InputView = styled.View({
  width: '100%',
  marginTop: 16,
});

export const TextView = styled.View({
  marginLeft: 42,
  marginRight: 42,
  marginTop: 22,
  alignItems: 'center',
  justifyContent: 'center',
});

export const BottomView = styled.View({
  flex: 1,
  justifyContent: 'flex-end',
  alignItems: 'center',
  width: '100%',
});

这是我的布局。我设置了行为 = 填充试图解决我的问题，但不起作用。

 <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
      <Container>
        {load && <Loading />}

        <TextView>
          <Text value={diaryStrings.title} isModalMessage />
        </TextView>
        <TextView>
          <Text value={diaryStrings.hintMessage} isModalMessage />
        </TextView>
        <TextView>
          <Text value={diaryStrings.tipMessage} isModalMessage />
        </TextView>

        <ImageView>
          <ImageSvg name={'calendar'} />
        </ImageView>
        <InputView>
          <Input
            placeholder={diaryStrings.diaryName}
            placeholderTextColor={tertiary}
            maxLength={20}
            iconName="book"
            onChangeText={text => {
              setDiaryNameError('');
              setDiaryName(text);
            }}
            maskType="nomask"
            error={diaryNameError}
            value={diaryName}
          />
          <Input
            placeholder={diaryStrings.initialDate}
            placeholderTextColor={tertiary}
            maxLength={10}
            iconName="date-range"
            onChangeText={text => {
              setDiaryInitDateError('');
              setDiaryInitDate(text);
            }}
            maskType="datetime"
            error={diaryInitDateError}
            value={diaryInitDate}
          />
        </InputView>

        <BottomView>
          <Button
            title={'next'}
            hasBackgroundColor={true}
            onPress={async () => {
              setLoad(true);
              await validateForm();
              setLoad(false);
            }}
          />
          <Button
            title="Cancel"
            onPress={() => {
              navigation.navigate('Home');
            }}
          />
        </BottomView>
      </Container>

我认为我使用了一些使 KeyboardAvoindView 无效的属性。我不想使用 ScrollView，它可能解决这个问题吗？有人可以帮忙吗？

Answer 1

我也一直在努力让 KeyboardAvoidingView 正常工作，对我有用的是将这些道具用于 KeyboardAvoidingView 并将内容包装在 ScrollView 中：

    <KeyboardAvoidingView enabled keyboardVerticalOffset={90} behavior={ Platform.OS === 'ios' ? 'padding' : false } style={{ flex: 1 }} >
        <ScrollView>

            {all content here}
       
         </ScrollView>
    </KeyboardAvoidingView>

我还必须使用 TextInput 中的 react-native，它需要 scrollEnabled={false} 道具

KeyboardAvoidingView 不工作反应原生

1 个答案: