React Native 高程样式表在 FlatList 中不起作用 [英] React Native elevation StyleSheet not working in FlatList

问题描述

我正在尝试在 FlatList 中设置我的 renderItem 样式，但高程无法正常工作.是我做错了什么还是 React Native 的问题?

I'm trying to style my renderItem in FlatList but elevation not working properly. Is there anything I'm wrong or this is a React Native issue?

我也测试了 ListView，但它仍然无法正常工作

I tested ListView too but it still not working properly

这是 TodoItem 组件

This is TodoItem component

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 中调用它的地方

And this is where I call it in FlatList

<FlatList
    data={this.props.items}
    renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>

关键是，如果我不使用这样的 FlatList，海拔会正常工作

The point is that elevation works properly if I don't use FlatList like this

<TodoItem text="Hello world" />

我除外我所见

推荐答案

大多数此类问题是由应用于周围视图或您尝试呈现的行的样式引起的.

Most issues like this are caused by styling that is applied to your surrounding view or the row that you are trying to render.

如果您将 marginHorizo​​ntal: 10 添加到 styles.container 的行，可能应该为您做.

If you add a marginHorizontal: 10 to the styles.container for the row that should probably do it for you.

这是一个简化的示例，其中行的边缘没有被切断.它有一些调整以使其工作，使用 state.items 而不是 props.items 并将 TodoItem 的样式名称更改为 itemContainer>.它应该让您了解如何实施它.

Here is a simplified example where the edges of the row are not cut off. It has a couple of tweaks to make it work, using state.items instead of props.items and changing the style name for the TodoItem to itemContainer. It should give you an idea of how to implement it.

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

Here is a snack showing it working https://snack.expo.io/@andypandy/flatlist-with-elevation-on-rows

这篇关于React Native 高程样式表在 FlatList 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！