gpt4 book ai didi

reactjs - React Native elevation StyleSheet 在 FlatList 中不起作用

转载 作者:行者123 更新时间:2023-12-04 17:41:10 27 4
gpt4 key购买 nike

我正在尝试在 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" />

What I excepted What I see

最佳答案

像这样的大多数问题是由应用于周围 View 或您尝试呈现的行的样式引起的。

如果您将 marginHorizo​​ntal: 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

关于reactjs - React Native elevation StyleSheet 在 FlatList 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54441020/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com