react-native - FlatList 不呈现行
问题描述
我正在尝试学习 react-native 的 FlatList 组件。观察一个教程,我实现了一个示例应用程序,它列出了滚动视图中的组件。我正在尝试用 FlatList 替换滚动视图,但项目不是屏幕上的渲染。我在这里包含了主要的源代码。
应用程序.js
import React, { Component } from 'react'
import {
StyleSheet,
View,
ScrollView,
FlatList
} from 'react-native'
import ColorButton from './components/ColorButton'
class App extends Component {
constructor() {
super()
this.state = {
backgroundColor: 'blue'
}
this.changeColor = this.changeColor.bind(this)
}
changeColor(backgroundColor) {
this.setState({backgroundColor})
}
render() {
const { backgroundColor } = this.state
return(
<FlatList
data = {'red', 'green', 'salmon'}
renderItem = {(color) => {
<ColorButton backgroundColor={color} onSelect={this.changeColor}></ColorButton>
} } />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
}
})
export default App
颜色按钮.js
import React from 'react'
import {
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native'
const ColorButton = ({ backgroundColor, onSelect=f=>f }) => (
<TouchableHighlight
style = {styles.button}
onPress={() => onSelect(backgroundColor)}
underlayColor="orange">
<View style = {styles.row}>
<View style = {[styles.sample, {backgroundColor}]} />
<Text style = {styles.text}>backgroundColor</Text>
</View>
</TouchableHighlight>
)
const styles = StyleSheet.create({
button: {
margin: 10,
padding: 10,
borderWidth: 2,
borderRadius: 10,
alignSelf: 'stretch',
backgroundColor: 'rgba(255,255,255,0.8)'
},
row: {
flexDirection: 'row',
alignItems: 'center'
},
sample: {
height: 20,
width: 20,
borderRadius: 10,
margin: 5,
backgroundColor: 'white'
},
text: {
fontSize: 30,
margin: 5
}
})
export default ColorButton
解决方案
将您的 flatlist 代码更改为以下代码:
<FlatList
data = {['red', 'green', 'salmon']}
renderItem = {({item}) => {
<ColorButton backgroundColor={item} onSelect={this.changeColor}>
</ColorButton>
} } />
希望能帮助到你。随时怀疑
推荐阅读
- karate - karate 0.9.5 版本不再在黄瓜报告中打印授权的整个有效载荷
- java - 如何根据列表中的属性对对象列表进行排序
- php - Wp_Query 未显示精选帖子
- php - shell_exec 不使用“作曲家自我更新”
- html - 如何在反应中修复背景图像的大小
- postgresql - 将多个 SQL 命令通过管道传输到 psql CLI
- spring-integration - 行号:54;列号:26;匹配的通配符是严格的,但找不到元素“int:scatter-gather”的声明
- python - Python Tkinter 事件 x、y、xroot、yroot 显示不正确的值
- python - 理解 MLP 神经网络——没有库的 Python
- javascript - Angular 10 ng-content 投影导致表格冻结