在 React Native 中使用 KeyboardAvoidingView 和多个平面列表时视图会缩小

Question

我最近遇到了一个问题，需要一些帮助。

我有一个带有 KeyboardAvoidingView 的简单屏幕，里面有文本输入 + 2 个平面列表 我最初的想法是让平面列表占据屏幕的 45%，并且可以滚动。

它在 iOS 上运行良好，但在 Android 上由于某种原因视图会缩小。

为问题添加小的可重现代码

const RandomTest: React.FC<NavigationProps> = ({ navigation }) => {
    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
    return (
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
            <View style={{ flex: 0.1 }}>
                <TextInput
                    style={{ flex: 0.7, borderWidth: 1, borderColor: AppColors.green, borderRadius: 10 }}
                    placeholder="Placeholder"
                    value={'random'}
                    onChangeText={(input) => {}}
                />
            </View>
            <View style={{ flex: 0.45 }}>
                <FlatList
                    style={styles.flatList}
                    contentContainerStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
                    data={data}
                    nestedScrollEnabled={true}
                    renderItem={({ item }) => (
                        <View style={{ height: 50 }}>
                            <Text>Test</Text>
                        </View>
                    )}
                />
            </View>

            <View style={{ flex: 0.45 }}>
                <FlatList
                    style={styles.flatList}
                    contentContainerStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
                    data={data}
                    nestedScrollEnabled={true}
                    renderItem={({ item }) => (
                        <View style={{ height: 50 }}>
                            <Text>test[![enter image description here][1]][1]</Text>
                        </View>
                    )}
                />
            </View>
        </KeyboardAvoidingView>
    );
};

在此添加视频

Answer 1

您必须在

KeyboardAvoidingView

内向容器添加额外的样式，请看以下代码：

<KeyboardAvoidingView
  style={{ flex: 1 }}
  contentContainerStyle={{
    flex: 1,
    flexShrink: 0, // <== this one
  }}