[英]React Native FlatList don't scroll
my FlatList doesn't scroll, I have inserted my FlatList in a SafeAreaView but doesn't work, I can see an item but I can't scroll.我的 FlatList 不滚动,我已将 FlatList 插入 SafeAreaView 但不起作用,我可以看到一个项目但我无法滚动。
How can I solve this problem?我怎么解决这个问题?
How can I try?我该如何尝试?
Thank you谢谢
export default function App() {
const [textTodo, setTextTodo] = useState('')
const [arrayTodo, setArrayTodo] = useState([])
const inputTextHandler = (text) => {
setTextTodo(text)
}
const insertTodoHandler = () => {
if (textTodo.trim() === '') {
Alert.alert('ToDo vuoto', 'Devi inserire qualcosa da fare')
return
}
setArrayTodo([...arrayTodo, { value: textTodo, id: Math.random().toString() }])
console.log(arrayTodo)
setTextTodo('')
Keyboard.dismiss()
}
return (
<View>
<Header />
<View style={styles.container}>
<TextInput onChangeText={inputTextHandler} value={textTodo} style={styles.input} placeholder='Cosa hai da fare?' />
<Button title='INSERISCI' onPress={insertTodoHandler} />
</View>
<SafeAreaView>
<FlatList
style={styles.output}
data={arrayTodo}
renderItem={({ item }) => <Text style={styles.outputText}>{item.value}</Text>}
keyExtractor={item => item.id}
/>
</SafeAreaView>
</View>
);
}
I had tried your code it's working fine, might be a problem with your styles check this one I had tried your by changing styles:我试过你的代码它工作正常,可能是你的 styles 有问题检查这个我通过更改 styles 尝试过你的代码:
import React, { useState} from 'react';
import { View, TextInput, ScrollView, FlatList, SafeAreaView, Button, Text, Keyboard, StyleSheet } from 'react-native';
export default function App() {
const [textTodo, setTextTodo] = useState('')
const [arrayTodo, setArrayTodo] = useState([])
const inputTextHandler = (text) => {
setTextTodo(text)
}
const insertTodoHandler = () => {
if (textTodo.trim() === '') {
Alert.alert('ToDo vuoto', 'Devi inserire qualcosa da fare')
return
}
setArrayTodo([...arrayTodo, { value: textTodo, id: Math.random().toString() }])
console.log(arrayTodo)
setTextTodo('')
}
return (
<View style={{marginTop:50,flex:1}}>
<View style={styles.container}>
<TextInput onChangeText={inputTextHandler} value={textTodo} style={styles.input} placeholder='Cosa hai da fare?' />
<Button title='INSERISCI' onPress={insertTodoHandler} />
</View>
<FlatList
style={styles.output}
data={arrayTodo}
renderItem={({ item }) => <View><Text style={styles.outputText}>{item.value}</Text></View>}
keyExtractor={item => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding:50,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
},
input: {
borderBottomWidth: 1,
marginVertical: 15,
width: '80%',
marginHorizontal: 5,
paddingLeft: 5
},
output: {
paddingHorizontal: 50,
},
outputText: {
borderWidth: 1,
borderColor: 'grey',
padding: 10,
marginVertical: 5,
borderRadius: 10,
},
shadow: {
shadowOffset: { width: 15, height: 15 },
shadowOpacity: 1
}
});
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.