我正在尝试在FlatList中设置renderItem的样式,但是高程无法正常工作。我有什么错吗,或者这是React Native问题?
我也测试了ListView,但是它仍然无法正常工作
这是TodoItem组件
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
height: 60,
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 0.4,
shadowRadius: 2,
elevation: 3,
justifyContent: 'center',
paddingHorizontal: 30,
marginBottom: 12
},
text: {
fontSize: 18,
fontWeight: '400',
color: '#080808'
}
})
export default class TodoItem extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> {this.props.text} </Text>
</View>
)
}
}
这就是我在FlatList中称呼它的地方
<FlatList
data={this.props.items}
renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>
要点是,如果我不使用FlatList,这样海拔高度就可以正常工作
<TodoItem text="Hello world" />
答案 0 :(得分:0)
大多数此类问题是由应用于周围视图或您要渲染的行的样式引起的。
如果您将marginHorizontal: 10
添加到styles.container
的行中,该行可能会为您执行此操作。
这是一个简化的示例,其中行的边缘没有被切除。使用state.items
代替props.items
,并通过将TodoItem的样式名称更改为itemContainer
,使其进行了一些调整。它应该使您了解如何实现它。
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
state = {
items: [
'Hello'
]
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.items}
renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>
</View>
);
}
}
class TodoItem extends React.Component {
render() {
return (
<View style={styles.itemContainer}>
<Text style={styles.text}> {this.props.text} </Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight + 10,
backgroundColor: '#ecf0f1',
},
itemContainer: {
marginHorizontal: 10,
height: 60,
backgroundColor: 'white',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 0.4,
shadowRadius: 2,
elevation: 3,
justifyContent: 'center',
paddingHorizontal: 30,
marginBottom: 12
},
text: {
fontSize: 18,
fontWeight: '400',
color: '#080808'
}
});
以下是显示它可以正常工作的小吃https://snack.expo.io/@andypandy/flatlist-with-elevation-on-rows
答案 1 :(得分:0)
有一个边距属性给我带来了问题,因此更改了属性并将其放在最后。
第一个代码
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',},
content:{
flex:1,
padding: 40,
backgroundColor:'pink',
},
list: {
marginTop: 20,
flex:1,
backgroundColor:'yellow',
},});
新代码
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',},
content:{
flex:1,
padding: 40,
backgroundColor:'pink',
},
list: {
flex:1,
backgroundColor:'yellow',
marginTop: 20,
},});
如果有人能澄清它为什么会发生。