React Native：为什么子FlatList超出父边界？

如何解决React Native：为什么子FlatList超出父边界？

在以下代码中

<View style={{
            borderWidth: 3,borderColor: 'blue',marginBottom: 100
        }}>
            <Text>{'Flat list example:'}</Text>
            <View style={{borderColor: 'orange',borderWidth: 2}}>
                <FlatList
                    data={list}
                    renderItem={renderItem}
                    keyExtractor={item => item.eventKey.id}
                    extraData={selectedId}
                />
            </View>
        </View>

包含FlatList的视图似乎跨越了父级的边界（橙色超出了蓝色）：

不使用绝对定位。 为什么孩子会超出父边界？（子元素不应该总是在父边界内吗？）

完整代码示例：

import React,{ useState } from "react";
import { FlatList,StyleSheet,Text,TouchableOpacity,View } from "react-native";

const Item = ({item,onPress,style}) => (
    <TouchableOpacity onPress={onPress} style={[styles.item,style]}>
        <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
);

const App = () => {
    const [selectedId,setSelectedId] = useState(null);

    const renderItem = ({item}) => {
        const backgroundColor = item.id === selectedId ? "green" : "grey";

        return (
            <View>
                <Item
                    item={item}
                    onPress={() => setSelectedId(item.id)}
                    style={{backgroundColor}}
                />
            </View>
        );
    };

    let list = [];
    for (let i = 0; i < 10; i++) {
        list.push({
            title: `title2='${i}'`,id: i,eventKey: {id: `'${i}'`}
        })
    }

    return (
        <View style={{
            borderWidth: 3,borderWidth: 2}}>
                <FlatList
                    data={list}
                    renderItem={renderItem}
                    keyExtractor={item => item.eventKey.id}
                    extraData={selectedId}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    item: {
        padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {
        fontSize: 32,});

export const FlatListExample = App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com(将#修改为@）