如何解决React Native Web,FlatList扩展页面
我有一些应用,看起来像这样
我需要FlattList进行独立滚动,但是要扩展页面并滚动其他所有内容,则不然。
我尝试使用布局,更改“ flex”和“ justify”参数,但这没有给我任何结果。
迫使FlatList自身滚动的唯一方法是手动更改父级View的高度,这显然不是解决方案。
import React from 'react'; import { StyleSheet,Text,View,TextInput,FlatList,Image} from 'react-native';
const styles = StyleSheet.create({
head: {
height: 64,alignSelf: 'stretch',alignItems: 'center',flexDirection: 'row',backgroundColor: "#FFF",shadowColor: "#000",},search: {
height: 48,borderRadius: 16,marginBottom: 8,card: {
height: 240,margin: 8,filtersCard: {
width: 280,height: 500,marginLeft: 16,paddingBottom: 34,filtersCardText: {
alignSelf: 'start',fontSize: 24,marginTop: 16,marginLeft: 24,} });
const App = () => { return (
<View style = {{
flex: 1,backgroundColor: '#cCcFd1',}}>
<View style = {styles.head}>
<Text style = {{fontSize: 48,fontWeight:900,paddingLeft: 16,selectable: false}}>HEAD (shouldn't move)</Text>
</View>
<View style={{ flexDirection: 'row',alignItems: "flex-start",marginTop: 16}}>
<View style={{width: 872}}>
<View style={styles.search}><Text> Search (shouldn't move)</Text></View>
<View style={{height: 400}}>
<FlatList
data={[ 1,2,3,5,8]} //just for demo
renderItem={({item}) => <View style={styles.card}/>}
/>
</View>
</View>
<View style={styles.filtersCard}><Text> Filters (shouldn't move)</Text></View>
</View>
</View>
); }
export default App;
解决方法
import React from 'react';
import {
StyleSheet,Text,View,TextInput,FlatList,Image,SafeAreaView,} from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.wrapper}>
<View style={styles.head}>
<Text>Head (shouldn't move)</Text>
</View>
<View
style={styles.body}>
<View style={styles.col1}>
<View style={styles.search}>
<Text> Search (shouldn't move)</Text>
</View>
<View style={{ height: 400,flex: 1 }}>
<FlatList
data={[1,2,3,5,8]} //just for demo
renderItem={({ item }) => <View style={styles.card} />}
/>
</View>
</View>
<View style={styles.col2}>
<Text> Filters (shouldn't move)</Text>
</View>
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
wrapper: {
flex: 1,backgroundColor: '#cCcFd1',},head: {
backgroundColor: '#FFF',body: {
flexDirection: 'row',alignItems: 'flex-start',marginTop: 16,flex: 1,search: {
marginBottom: 8,backgroundColor: '#FFF',card: {
height: 240,marginVertical: 8,col1: {
width: '60%',col2: {
height: 500,width: '40%',marginLeft: 16,});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。