我正在尝试创建一个水平滑动模式,显示搜索栏,组滑块和朋友列表。组滑块工作正常,是一个水平滑动的FlatList,但是,朋友的FlatList及其状态不滚动(它是一个垂直的FlatList)。我不知道如何解决这个问题。
这是我的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;
字符串
我使用Flex:在所有父视图上设置flexGrow:1,在FlatList上设置flexGrow:1,甚至设置特定的高度。FlatList适用于react-native的普通模态,但不适用于react-native-modal。
1条答案
按热度按时间ht4b089n1#
尝试使用
react-native-gesture-handler
库中的FlatList
。它在对话、叠加和整体上更适合任何“特殊”情况。对于任何其他情况,请记住库也有
ScrollView
和Touchable*
组件)。如果它不工作,检查你的模态容器和列表是否被屏幕包围,或者它是否在屏幕下延伸。最简单的检查方法是设置一个bottomMargin和一个背景颜色:如果背景在那里,但你看不到边距,你的元素将离开屏幕。