React Native：键盘弹出时视图如何随文本自适应高度或滚动

问题描述 #

创建了包含标题和正文的React Native视图，常规状态运行正常，但输入正文、键盘弹出时，文本会超出可视范围。需要实现视图高度随文本内容自适应，或让视图支持完整滚动，确保文本不超出视图。

视图代码 #

<KeyboardAvoidingView
  style={{
    display: 'flex',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
  }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
  <SafeAreaView
    style={{
      flex: 1,
      backgroundColor: !darkTheme
        ? Colors.light.f2Color
        : Colors.dark.backgrounColor,
    }}>
    {/* header */}

    {/* Post Section */}

    <View
      style={{
        width: width * 0.96,
        borderRadius: 16,
        alignSelf: 'center',
        marginTop: height * 0.01,
        flex: 0.7,
      }}>
      <View
        style={{
          backfaceVisibility: 'hidden',
          backgroundColor: !darkTheme
            ? Colors.light.backgrounColor
            : Colors.dark.cardColor,
          borderRadius: 16,
          flex: 1,
          paddingHorizontal: width * 0.02,
        }}>
        <TextInput
          style={{
            fontWeight: '300',
            fontStyle: 'normal',
            fontSize: 20,
            fontFamily: 'OpenSans-Regular',
            paddingHorizontal: width * 0.015,
            color: !darkTheme ? Colors.light.black : Colors.dark.white,
            width: '100%',
            marginTop: height * 0.02,
            flexWrap: 'wrap',
          }}
          value={postTitle}
          onChangeText={value => {
            setPostTitle(value);
          }}
          maxLength={150}
          clearButtonMode="never"
          multiline={true}
          placeholder="Add a title"
          placeholderTextColor={Colors.light.darkgrey}
        />

        <TextInput
          style={{
            fontWeight: '300',
            fontStyle: 'normal',
            fontSize: 14,
            fontFamily: 'OpenSans-Regular',
            paddingHorizontal: width * 0.015,
            color: !darkTheme ? Colors.light.black : Colors.dark.white,
            width: '100%',
            marginTop: height * 0.03,
           
          }}
          value={postBody}
          onChangeText={value => {
            setPostBody(value);
          }}
          maxLength={1000}
          clearButtonMode="always"
          multiline={true}
          placeholder="Body text"
          placeholderTextColor={Colors.light.darkgrey}
        />

        {contentType === 'Add Question' && (
          <View>
            <FlatList
              data={choiceArray}
              scrollEnabled={true}
              renderItem={({item, index}) => (
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <TextInput
                    style={{
                      fontWeight: '300',
                      fontStyle: 'normal',
                      fontSize: 14,
                      fontFamily: 'OpenSans-Regular',
                      paddingHorizontal: width * 0.015,
                      marginTop: height * 0.025,
                      color: !darkTheme
                        ? Colors.light.black
                        : Colors.dark.white,
                      width: '90%',
                    }}
                    value={postChoices[index]}
                    onChangeText={value => {
                      addOptionValue(index, value);
                    }}
                    maxLength={150}
                    clearButtonMode="never"
                    multiline={false}
                    placeholder={
                      'Option ' +
                      String.fromCharCode(97 + index).toUpperCase()
                    }
                    placeholderTextColor={Colors.light.cardOuterShadow}
                  />
                  {index > 1 ? (
                    <TouchableOpacity onPress={() => optionCdelete(index)}>
                      <Image
                        source={require('../assets/images/red-slash.png')}
                      />
                    </TouchableOpacity>
                  ) : null}
                </View>
              )}
              numColumns={1}
              keyExtractor={(item, index) => index}
              contentContainerStyle={{
                backgroundColor: '#fff',
                marginTop: height * 0.02,
              }}
              showsVerticalScrollIndicator={false}
              onEndReachedThreshold={0}
              showsHorizontalScrollIndicator={false}
              bounces={false}
              keyboardShouldPersistTaps="handled"
            />

            {choiceArray.length < 4 ? (
              <TouchableOpacity
                onPress={addNextOption}
                style={{
                  flexDirection: 'row',
                  marginTop: height * 0.03,
                  alignItems: 'center',
                }}>
                <Image source={require('../assets/images/plus.png')} />
                <Text
                  style={{
                    color: Colors.light.darkgrey,
                    fontSize: 14,
                    fontFamily: 'OpenSans-Regular',
                    marginLeft: width * 0.01,
                  }}>
                  Add Option
                </Text>
              </TouchableOpacity>
            ) : null}
          </View>
        )}
      </View>
    </View>
  </SafeAreaView>
</KeyboardAvoidingView>

问题截图 #

解决方案 #

1. 用ScrollView包裹内容区域，实现滚动 #

问题核心在于给Post Section的外层View设置了flex:0.7的固定占比，键盘弹出后可用空间缩小，内容直接溢出。把这个View替换成ScrollView，让内容支持滚动：

// 替换原Post Section外层View
<ScrollView
  style={{
    width: width * 0.96,
    borderRadius: 16,
    alignSelf: 'center',
    marginTop: height * 0.01,
  }}
  contentContainerStyle={{
    paddingBottom: 20, // 避免底部内容被键盘遮挡
  }}
  keyboardShouldPersistTaps="handled"
>
  {/* 保留原内层View及所有内容 */}
  <View
    style={{
      backfaceVisibility: 'hidden',
      backgroundColor: !darkTheme
        ? Colors.light.backgrounColor
        : Colors.dark.cardColor,
      borderRadius: 16,
      paddingHorizontal: width * 0.02,
      paddingVertical: height * 0.02, // 增加内边距，避免内容贴边
    }}>
    {/* 标题、正文、选项等内容 */}
  </View>
</ScrollView>

2. 优化KeyboardAvoidingView配置 #

添加keyboardVerticalOffset适配状态栏高度，确保键盘弹出时布局调整更精准：

import { useSafeAreaInsets } from 'react-native-safe-area-context';

// 组件内获取安全区域内边距
const insets = useSafeAreaInsets();

<KeyboardAvoidingView
  style={{
    flex: 1, // 替换固定height为flex:1，让容器自适应屏幕
    width: Dimensions.get('window').width,
  }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={insets.top + 20} // 适配状态栏高度
>

3. 让多行TextInput高度自适应 #

给正文TextInput添加最小高度，并通过onContentSizeChange动态调整高度：

<TextInput
  style={{
    // 保留原有样式
    minHeight: 60, // 设置最小高度
  }}
  value={postBody}
  onChangeText={value => setPostBody(value)}
  multiline={true}
  onContentSizeChange={(event) => {
    const { height } = event.nativeEvent.contentSize;
    setBodyInputHeight(height); // 动态更新输入框高度
  }}
/>

4. 移除固定高度限制 #

删除所有固定的flex占比（如原flex:0.7）和固定高度设置，让布局随内容自然伸缩，配合ScrollView实现完整滚动。

内容的提问来源于stack exchange，提问作者deepanshi gupta