Flatlist 下面的 React Native View 闪烁答案

【问题标题】：React Native View below Flatlist is flickeringFlatlist 下面的 React Native View 闪烁
【发布时间】：2020-08-03 04:39:06
【问题描述】：

我在flatlist 下方有一个视图。我希望视图始终位于屏幕底部，并将其包裹在 KeyboardAvoidingView 中。查看视频了解更多详情

https://drive.google.com/file/d/1eeMfpH3AV7AqLNqAhlhQX5JmOQSRLbtp/view?usp=sharing

只要我评论我的FlatList 代码，底部视图就不会闪烁。下面是我的代码

<View>
<FlatList ..../>
<KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
      >
        <SafeAreaView style={styles.bottomViewStyle}>
          <TouchableOpacity>
            <Image source={CAMERA_CHAT_ICON} />
          </TouchableOpacity>
          <View style={styles.textAreaViewStyle}>
            <TextInput
              placeholder="Start Typing..."
              placeholderTextColor="#9b9b9b"
              style={styles.textInputStyle}
            />
          </View>
          <TouchableOpacity>
            <Image source={CHAT_SEND_ICON} />
          </TouchableOpacity>
        </SafeAreaView>
      </KeyboardAvoidingView>
</View>

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

包括FlatList 组件在内的所有组件都应包裹在KeyboardAvoidingView 内。此外，SafeAreaViews 应该放在屏幕的根部，因为它为 SafeAreas 提供了填充。


<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}>
    <SafeAreaView>
         <FlatList ... />
    
         <View>
             <TextInput ... />
         </View>
    </SafeAreaView>
</KeyboardAvoidingView>

有关更多示例，请参阅 https://reactnative.dev/docs/keyboardavoidingview 和 https://reactnative.dev/docs/safeareaview。

【讨论】：