React Native elevation StyleSheet not working in FlatList

旧巷老猫 提交于 2021-02-20 00:49:03

问题


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?

I tested ListView too but it still not working properly

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>
        )
    }
}

And this is where I call it in FlatList

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

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

<TodoItem text="Hello world" />

What I excepted What I see


回答1:


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

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

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'
  }
});

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



来源:https://stackoverflow.com/questions/54441020/react-native-elevation-stylesheet-not-working-in-flatlist

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!