Блог

Главная - Вопросы по программированию - Огромный разрыв между TouchableOpacity после FlatList

Огромный разрыв между TouchableOpacity после FlatList

#react-native #react-native-android

#react-native

Вопрос:

Я пытаюсь создать TouchableOpacity после FlatList в react native. Хотя он отображается в представлении, но между списком и кнопкой существует огромный разрыв.введите описание изображения здесь

Ниже приведен соответствующий код :

            <FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
                return <View style={{ width: '100%', marginTop: 32 }}>
                    <View style={{ flexDirection: "row" }}>
                        <View>
                            <FontAwesome5 name={item.iconFont} size={32} />
                        </View>
                        <View>
                            <Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
                            <Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
                        </View>
                    </View>
                </View>
            }} />

            <TouchableOpacity style={styles.button}>
                <Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
            </TouchableOpacity>

Я делаю что-то не так здесь?

PS => Хотя FlatList работает нормально

соответствующие стили :

 button: {
        backgroundColor: "#000000",
        height: 40,
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 20
    }

Комментарии:

1. Текст вашей осязаемой непрозрачности белый. Если вы не изменили цвет фона, вы его не увидите.

2. На самом деле это не проблема. Я предоставил стиль: button: { backgroundColor: «#000000», height: 40, alignItems: «center», justifyContent: «center», borderRadius: 20 }

3. Я не могу воспроизвести проблему в этом случае. Можете ли вы показать больше макета или поделиться закусками?

4. Я соответствующим образом обновил qs

5. можете ли вы показать представление контейнера?

Ответ №1:

Переместите осязаемую непрозрачность в опору Flatlist для listfootercomponent. Вот так:

 <FlatList
     ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>

Это должно решить проблему интервалов. И размещайте компонент TouchableOpacity всегда внизу FlatList.