在模态内部反应本机 FlatList
React Native FlatList Inside of a Modal
我试图将 FlatList 放入模态框内,但列表只是从我给它的容器中溢出,而不是滚动。我已经尝试添加 flex 等,但没有运气让 List 保持在范围内。有什么建议吗?
Here is the Modal
const modalContainer = {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
};
const innerContainer = {
alignItems: 'center',
// flex: 1,
height: 130,
backgroundColor: colors.white.white,
borderRadius: borderRadius.sm,
width: 450,
};
render() {
const styles = styleMaker();
return (
<View>
<Modal visible = {this.props.visible}>
<View style={styles.overlay} />
<View style = {styles.modalContainer}>
<View style = {styles.innerContainer}>
{this.props.children}
</View>
</View>
</Modal>
</View>
);
}
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => this.onRequestClose()}>
<FlatList
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
</Modal>
你可以找到一个例子如下link
https://snipsave.com/javawebline/#/snippet/ZYgnr5nu2hHPrM8atX
这对我很有用:
用 ScrollView 包装 Flatlist,用 onStartShouldSetResponder={(): boolean => true}
包装视图
完整示例:
<Modal
....>
<View style={{ height: 300 }}>
<ScrollView>
<View onStartShouldSetResponder={(): boolean => true}>
<FlatList
....
/>
</View>
</ScrollView>
</View>
</Modal>
我试图将 FlatList 放入模态框内,但列表只是从我给它的容器中溢出,而不是滚动。我已经尝试添加 flex 等,但没有运气让 List 保持在范围内。有什么建议吗?
Here is the Modal
const modalContainer = {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
};
const innerContainer = {
alignItems: 'center',
// flex: 1,
height: 130,
backgroundColor: colors.white.white,
borderRadius: borderRadius.sm,
width: 450,
};
render() {
const styles = styleMaker();
return (
<View>
<Modal visible = {this.props.visible}>
<View style={styles.overlay} />
<View style = {styles.modalContainer}>
<View style = {styles.innerContainer}>
{this.props.children}
</View>
</View>
</Modal>
</View>
);
}
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => this.onRequestClose()}>
<FlatList
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
</Modal>
你可以找到一个例子如下link
https://snipsave.com/javawebline/#/snippet/ZYgnr5nu2hHPrM8atX
这对我很有用:
用 ScrollView 包装 Flatlist,用 onStartShouldSetResponder={(): boolean => true}
完整示例:
<Modal
....>
<View style={{ height: 300 }}>
<ScrollView>
<View onStartShouldSetResponder={(): boolean => true}>
<FlatList
....
/>
</View>
</ScrollView>
</View>
</Modal>