平面列表不会滚动

Question

我对本机反应非常陌生，我正在尝试构建我的第一个应用程序。 我正在尝试使用平面列表，但它不会滚动。 这些项目出现在屏幕上，但是它们不会滚动。 我的应用程序基本上只是将用户输入输入到列表中。 我尝试删除任何类型的 flex 样式，但仍然没有。 请帮助:)

编辑：我忘记为父视图添加高度。 哎呀

这是我的列表组件代码

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity,Modal,TextInput, FlatList, ScrollView } from 'react-native';


const AddUpdate = () => {
  const [posts,setPosts] = useState('')
  const [modal,setModal] = useState(false)
  const [array,setArray] = useState([])

  const AddToArray = () => {
    setArray(array =>[...array,posts])
    alert(array)
    setModal(false)

  }

  return (
   <View >
   <TouchableOpacity style = {styles.button} 
    onPress={() => setModal(true)} >
   <Text style = {styles.subTitle} >Post An Update</Text>
  </TouchableOpacity>
    <Modal 
    animationType='slide'
    visible={modal}
    >
    <View>
    <View style={styles.modalHeader}/>
    <TextInput
       multiline 
       placeholder="Write your message"
       style={styles.content}
       onChangeText={(val) => setPosts(val)}
       value={posts}
       maxLength={300}
    />
    <TouchableOpacity style = {styles.sendButton} 
    //onPress={() => setModal(false)} 
    onPress = {AddToArray} 
    
    >
  <Text style = {styles.sendTitle}>Post</Text>
  </TouchableOpacity>
    </View>
    </Modal>
 
   
  {/* <FlatList //this is meant to be coded out.
  data={array}
 renderItem={({item}) => ( 
 
   <Text style={styles.postText}>{item}</Text>
 )}
  >
  {array.map((item,key) => (
     <TouchableOpacity>
      <Text key={key} style={styles.postText}>{item}</Text>
      </TouchableOpacity>
    
    ))}  
  
    </FlatList>
 */}

<FlatList
 data={array}
 renderItem={({item}) => ( 
   <Text style={styles.item}>{item}</Text>
 )}

/>   

</View>

  );
}


const styles = StyleSheet.create({
 
  button: {
    elevation:8,
    margin: 5,
    top:-56,
    alignItems:'center',
    padding:30,
    backgroundColor:'#BEBEBE',
    borderRadius:25,
    
  },

  sendButton: {
    elevation:8,
    position:'absolute',
    top:20,
    right:10,
    left:200,
    alignItems:'center',
    padding:9,
    backgroundColor:'#8B0000',
    borderRadius:5,
    
  },

  subTitle: {
    fontSize:30, 
    color: 'white',
    marginLeft:-150,

  },

  sendTitle: {
    fontSize:20, 
    color: 'white',
    justifyContent:'center',

  },

  content: {
    flex:1,
    position:'absolute',
    fontSize:25,
    color:'black',
    top:130,
    right:20,
    left:20,
  
  },

  modalHeader: {
    height:90,
    backgroundColor:'#CC9900'

  },

  postText: {
    top: -60,
    marginTop:20,
    color:'black',
    fontSize:25,
    elevation:8,
    //alignItems:'center',
    padding:30,
    backgroundColor:'#BEBEBE',
    borderRadius:25,
    
  },

  item: {
    color:'black',
    fontSize:25,
    
  },


  
});

export default AddUpdate; 

这是我的 App.js 代码

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { FlatList,  StyleSheet, Text,  View} from 'react-native';
import AddUpdate from  './components/AddUpdate';


export default function App() {

  return (
    <View style={styles.container}>
    <View style = {styles.header}/>
    <View style= {{backgroundColor:'#fff'}}/>
      <Text style={styles.title}> Updates!</Text>
      <StatusBar style="auto" />
      <AddUpdate/>
  
      </View>
    
  );
}

const styles = StyleSheet.create({
  container: {
   /// flex: 1,
   /// flexDirection: 'column',
    alignItems: 'stretch',
  //  paddingTop:30, 
  },
  header: {
    height:220, 
    backgroundColor:'#8B0000',
    borderBottomLeftRadius:55,
    borderBottomRightRadius:55,
  },

  title: {
    fontWeight:'bold',
    fontSize: 40,
    color:'#fff',
    textAlign:'center',
    top:-120,
  },

 
});

Answer 1

请在滚动视图中附上您的平面列表

import { ScrollView } from 'react-native-gesture-handler';

<ScrollView style={{flex:1}}>
<View style={{ flex: 1, flexDirection:'row', justifyContent: 'center', }}>

///// Place contents here

</View>
</ScrollView>

Answer 2

contentContainerStyle={{
    flexGrow: 1,
    }}

将其添加到 Flatlist 所以总的来说它看起来像这样：

<FlatList
 data={array}
contentContainerStyle={{
    flexGrow: 1,
    }}
 renderItem={({item}) => ( 
   <Text style={styles.item}>{item}</Text>
 )}

/>   

希望这可以帮助

Answer 3

尝试ScrollView而不是FlatList 。 这将对您有所帮助。 ScrollView一次渲染它的所有 react 子组件，但这有一个性能下降。

<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
data={array}
renderItem={({item}) => ( 
  <Text style={styles.item}>{item}</Text>
  )}
</ScrollView>
</SafeAreaView>

styles：

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
  marginHorizontal: 20,
},
item: {
  color:'black',
  fontSize:25,

},

});