react-native-modal内Vertical FlatList无法滚动问题求助

我正在开发一款从左侧滑入的模态框，包含搜索栏、可横向滑动的群组FlatList（该组件运行正常），但展示好友状态的纵向FlatList无法滚动。我已尝试为所有父视图设置flex:1、给FlatList添加flexGrow:1、指定具体高度等方案，该FlatList在React Native原生Modal中可正常滚动，但使用react-native-modal时失效。

代码如下：

import React from 'react';
import { StyleSheet, View, Text, FlatList, Image } from 'react-native';
import Modal from 'react-native-modal';
import ColonySliderModal from "../components/colonySliderModal";
import SearchBarModal from "../components/searchBarModal";

const FriendsModal = ({ isModalVisible, hideModal }) => {

    // Define an array of friends and their statuses
    const randomFriendsList = [
        { name: 'Jack', status: 'cooking' },
        { name: 'Ivy', status: 'reading' },
        { name: 'Frank', status: 'playing games' },
        { name: 'Alice', status: 'coding' },
        { name: 'Grace', status: 'traveling' },
        { name: 'David', status: 'cooking' },
        { name: 'Emma', status: 'exercising' },
        { name: 'Bob', status: 'sleeping' },
        { name: 'Charlie', status: 'coding' },
        { name: 'Henry', status: 'playing games' }
    ];

    const renderItem = ({ item }) => (
        <View style={styles.friendItem}>
            <View styles={styles.infoContainer}>
                <Image
                    style={styles.friendImage}
                    source={require('../assets/marker.png')}
                />
                <Text style={styles.friendName}>{item.name}</Text>
            </View>
            <Text style={styles.friendStatus}>{item.status}</Text>
        </View>
    );

    return (
        <Modal 
            animationIn="slideInLeft" 
            animationOut="slideOutRight" 
            isVisible={isModalVisible}
            deviceWidth={1}
            onSwipeComplete={hideModal}
            swipeThreshold={125}
            swipeDirection="left"
            propagateSwipe
        >
            <View style={styles.modalContainer} >
                <View style={styles.modalContent}>
                    {/* ------ SEARCH BAR ------ */}
                    <SearchBarModal
                        imageSource={require('../assets/search.png')}
                        style={styles.searchBar}
                        onPress={() => console.log("Pressed search bar")}
                    />

                    <View style={styles.sliderContainer}>

                    
                        {/* Colony Buttons Slider */}
                        <ColonySliderModal style={styles.colonySlider} />

                        {/* Add Friends Button */}
                        {/* <TouchableOpacity style={styles.plusButton}>
                                <Text style={styles.plusText}>+</Text>
                        </TouchableOpacity> */}
                    </View>
                    

                    {/* Display the list of friends and statuses using FlatList */}
                    <View style={{flex: 1, marginTop: 20}}>
                        <FlatList
                            data={friendsList}
                            renderItem={renderItem}
                            keyExtractor={(item, index) => index.toString()}
                            showsVerticalScrollIndicator={true}
                        />
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        // backgroundColor: 'transparent',
    },
    modalContent: {
        backgroundColor: '#2C6765',
        borderBottomRightRadius: 50,
        borderTopRightRadius: 50,
        // alignItems: 'center',
        width: '90%',
        flex: 1
    },
    searchBar: {
        // position: 'absolute',
        // top: '5%',
        // left: '5%',
        alignSelf: 'center',
        marginTop: 43,
    },
    sliderContainer: {
        marginTop: 13,
        width: '100%',
        marginLeft: 20,
    },
    // colonySlider: {
    //     // position: 'absolute',
    //     // top: '12%',
    //     // left: '4%',
    //     // width: '82%'

    // },
    plusButton: {
        backgroundColor: '#E7EFCA',
        marginRight: 10,
        padding: 10,
        width: 45,
        height: 45,
        borderRadius: 50,
        marginTop: 5
        // position: 'absolute',
        // top: '12.5%', // Adjust this to position the button as desired
        // right: '3%', // Adjust this to position the button as desired
    },
    plusText: {
        fontSize: 40, // Adjust the font size as needed
        color: '#2C6765',
        fontWeight: 'bold',
        textAlign: 'center',
        justifyContent: 'center',
        marginTop: -15,
    },
    infoContainer: {
        flexDirection: 'row',
        display: 'flex',
        alignContent: 'space-around',
    },
    friendItem: {
        // borderBottomWidth: 1,
        // borderColor: '#CCC',
        margin: 10,
    },
    friendName: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#E7EFCA',
        left: 80,
    },
    friendStatus: {
        fontSize: 16,
        color: '#D5B747',
        left: 80,
    },
    friendImage: {
        height: 40,
        width: 40,
        left: 20,
        position: 'absolute',
        tintColor: '#E7EFCA'
    },
   
});

export default FriendsModal;

1. 修正数据源变量名错误 #

FlatList中使用的data={friendsList}与定义的数据源randomFriendsList名称不匹配，导致列表无数据，自然无法滚动。修改为：

<FlatList
    data={randomFriendsList}
    renderItem={renderItem}
    keyExtractor={(item, index) => index.toString()}
    showsVerticalScrollIndicator={true}
/>

2. 修复手势冲突与布局问题 #

react-native-modal的左滑关闭功能会和FlatList的纵向滚动产生手势冲突，同时调整Modal和FlatList的配置：

• 给Modal添加avoidKeyboard={true}，避免键盘弹出时布局错乱
• 给FlatList添加flexGrow:1、removeClippedSubviews={true}、useNativeDriver={true}优化滚动性能
• 移除modalContainer中的justifyContent: 'flex-end'，避免内容被挤压到底部

修改后的Modal与FlatList代码：

<Modal 
    animationIn="slideInLeft" 
    animationOut="slideOutRight" 
    isVisible={isModalVisible}
    deviceWidth={1}
    onSwipeComplete={hideModal}
    swipeThreshold={125}
    swipeDirection="left"
    propagateSwipe
    avoidKeyboard={true}
>
    <View style={styles.modalContainer} >
        <View style={styles.modalContent}>
            {/* 其他组件保持不变 */}
            <View style={{flex: 1, marginTop: 20}}>
                <FlatList
                    data={randomFriendsList}
                    renderItem={renderItem}
                    keyExtractor={(item, index) => index.toString()}
                    showsVerticalScrollIndicator={true}
                    flexGrow={1}
                    removeClippedSubviews={true}
                    useNativeDriver={true}
                />
            </View>
        </View>
    </View>
</Modal>

3. 修正renderItem中的样式语法错误 #

renderItem里的<View styles={styles.infoContainer}>多写了一个s，应为style（单数），否则该视图样式不生效，可能影响布局高度：

const renderItem = ({ item }) => (
    <View style={styles.friendItem}>
        <View style={styles.infoContainer}>
            <Image
                style={styles.friendImage}
                source={require('../assets/marker.png')}
            />
            <Text style={styles.friendName}>{item.name}</Text>
        </View>
        <Text style={styles.friendStatus}>{item.status}</Text>
    </View>
);

4. 调整样式容器配置 #

修改modalContainer样式，移除底部对齐配置：

modalContainer: {
    flex: 1,
    // justifyContent: 'flex-end', 移除该行
},

内容的提问来源于stack exchange，提问作者Faris Khattak