React Native View ниже Flatlist мигает - PullRequest
Новая
       27

React Native View ниже Flatlist мигает

1 голос
/ 03 августа 2020

У меня вид ниже 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>

1 Ответ

0 голосов
/ 03 августа 2020

Все компоненты, включая компонент FlatList, должны быть заключены в KeyboardAvoidingView. Кроме того, SafeAreaView s следует поместить в root экрана, поскольку он обеспечивает заполнение для 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 для получения дополнительных примеров.

...