Javascript Flatlist赢得'；卷轴_Javascript_Reactjs_React Native_React Native Flatlist

Javascript Flatlist赢得'；卷轴

javascript reactjs react-native

Javascript Flatlist赢得'；卷轴,javascript,reactjs,react-native,react-native-flatlist,Javascript,Reactjs,React Native,React Native Flatlist,我是react native的新手，我正在尝试构建我的第一个应用程序。我试图使用平面列表，但它不会滚动。这些项目会出现在屏幕上，但不会滚动。我的应用程序基本上只是将用户输入输入列表。我试着去除任何类型的flex样式，但仍然没有。请帮忙：）编辑：我忘了给父视图添加高度。哎呀这是我的列表组件代码 import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity,Modal,Text

我是react native的新手，我正在尝试构建我的第一个应用程序。我试图使用平面列表，但它不会滚动。这些项目会出现在屏幕上，但不会滚动。我的应用程序基本上只是将用户输入输入列表。我试着去除任何类型的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;

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、TouchableOpacity、模态、文本输入、平面列表、滚动视图}；
常量AddUpdate=（）=>{
const[posts，setPosts]=useState（“”）
const[modal，setModal]=useState（false）
常量[array，setArray]=useState（[]）
常量AddToArray=（）=>{
setArray（数组=>[…数组，posts]）
警报（阵列）
setModal（假）
}
返回(
setModal（真）}>
发布更新
设置柱（val）}
值={posts}
maxLength={300}
/>
setModal（假）}
onPress={AddToArray}
>
邮递
{/*  ( 
{item}
)}
>
{array.map（（项，键）=>(
{item}
))}  
*/}
( 
{item}
)}
/>   
);
}
const styles=StyleSheet.create({
按钮：{
立面图：8，
差额：5，
前-56，
对齐项目：'中心'，
填充：30，
背景颜色：“#BEBEBE”，
边界半径：25，
},
发送按钮：{
立面图：8，
位置：'绝对'，
前20名，
右:10,，
左:200,，
对齐项目：'中心'，
填充：9，
背景颜色：“#8B0000”，
边界半径：5，
},
副标题:{
尺寸：30，
颜色：'白色'，
边缘左侧：-150，
},
发送标题：{
尺寸：20，
颜色：'白色'，
辩护内容：'中心'，
},
内容：{
弹性：1，
位置：'绝对'，
尺寸：25，
颜色：'黑色'，
排名：130，
右:20,，
左:20,，
},
modalHeader：{
身高：90，
背景颜色：“#CC9900”
},
后文：{
前-60，
玛金托普：20，
颜色：'黑色'，
尺寸：25，
立面图：8，
//对齐项目：'中心'，
填充：30，
背景颜色：“#BEBEBE”，
边界半径：25，
},
项目：{
颜色：'黑色'，
尺寸：25，
},
});
导出默认的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,
  },

 
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
从“react native”导入{FlatList，StyleSheet，Text，View}；
从“./components/AddUpdate”导入AddUpdate；
导出默认函数App（）{
返回(
更新！
);
}
const styles=StyleSheet.create({
容器：{
///弹性：1，
///flexDirection:'列'，
对齐项目：“拉伸”，
//paddingTop:30，
},
标题：{
身高：220，
背景颜色：“#8B0000”，
边界半径：55，
边界半径：55，
},
标题：{
字体权重：'粗体'，
尺寸：40，
颜色：“#fff”，
textAlign:“中心”，
前-120，
},
});

请将您的平面列表放在滚动视图中

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

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

///// Place contents here

</View>
</ScrollView>

从“反应本机手势处理程序”导入{ScrollView}；
/////在此放置内容

请将您的平面列表放在滚动视图中

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

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

///// Place contents here

</View>
</ScrollView>

从“反应本机手势处理程序”导入{ScrollView}；
/////在此放置内容

将此添加到平面列表总的来说是这样的：


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

/>


( 
{item}
)}
/>

希望这有帮助

将此添加到平面列表总的来说是这样的：


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

/>


( 
{item}
)}
/>

希望这有帮助

尝试

滚动查看

而不是

平面列表

。这对你有帮助。

ScrollView

一次呈现其所有子组件，但这会降低性能

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

尝试

ScrollView

而不是

FlatList

。这对你有帮助。

ScrollView

一次呈现其所有子组件，但这会降低性能

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

我试过了，结果我所有的东西都不见了。请试一下我修改过的答案（我添加了一个视图）。不幸的是，运气不好。它仍然隐藏我的所有项目。我试图删除scrollview旁边的flex:1，这似乎使我的项目重新出现。但是，仍然没有滚动请查看一个完全可行的平面列表，它可以在此处滚动：，我还在平面列表后添加了额外的文本，以向您显示滚动视图功能。我尝试了它，它使我的所有项目都不见了。请尝试我的修订答案（我添加了一个视图）。不幸的是，没有运气。它仍然隐藏我的所有项目。我试图删除scrollview旁边的flex:1，这似乎使我的项目重新出现。但是，仍然没有滚动请查看一个完全可行的平面列表，它可以在此处滚动：，我还在平面列表后添加了额外的文本，以向您显示scrollView功能您可以尝试我的解决方案吗？您可以尝试我的解决方案吗？我也尝试过这个。运气不好，它显示了我的项目，但仍然没有滚动。我也尝试过这个。不走运，它显示了我的项目，但仍然没有滚动我得到了一个错误，说“文本字符串必须在组件中呈现。我对此做了一些修改，甚至尝试使用带有随机文本块的scrollview。但是仍然没有滚动，这是因为没有添加与

文本相关的样式。我补充说，现在试一试。你必须从react native
导入ScrollView
和SafeAreaView
，但还是没有运气。我不知道它为什么不起作用我说了一个错误“文本字符串必须在组件中呈现。我对此做了一些修改，甚至尝试使用带有随机文本块的scrollview。但是仍然没有滚动，这是因为没有添加与文本相关的样式。我补充说，现在试一试。你必须从react native
导入ScrollView
和SafeAreaView
，但还是没有运气。我不知道为什么它不起作用