Reactjs React本机提升样式表在平面列表中不起作用

我正在尝试在平面列表中设置渲染器的样式，但立面无法正常工作。我有什么错吗？或者这是个问题

我也测试了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>
        )
    }
}

import React，{Component}来自“React”
从“react native”导入{Text，View，StyleSheet}
const styles=StyleSheet.create({
容器：{
身高：60，
背景颜色：“白色”，
边界半径：10，
阴影颜色：“#000”，
阴影偏移：{宽度：2，高度：2}，
阴影不透明度：0.4，
阴影半径：2，
标高：3，
为内容辩护：“中心”，
水平方向：30，
marginBottom:12
},
正文：{
尺码：18，
fontWeight:'400'，
颜色：“#080808”
}
})
将默认类导出到DoItem扩展组件{
render（）{
返回(
{this.props.text}
)
}
}

这就是我称之为平面列表的地方

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

}
/>

关键是，如果我不这样使用FlatList，立面可以正常工作

<TodoItem text="Hello world" />

---

大多数此类问题都是由应用于周围视图或试图渲染的行的样式引起的

如果在

styles.container

中添加一个

marginHorizontal:10

，则该行可能需要这样做

下面是一个简化示例，其中行的边未被切断。它有几个调整使其工作，使用

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

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet，FlatList}；
从“expo”导入{Constants}；
导出默认类App扩展React.Component{
状态={
项目：[
“你好”
]
}
render（）{
返回(
}
/>
);
}
}
类TodoItem扩展了React.Component{
render（）{
返回(
{this.props.text}
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight+10，
背景颜色：“#ecf0f1”，
},
itemContainer：{
marginHorizontal:10，
身高：60，
背景颜色：“白色”，
边界半径：10，
阴影颜色：“#000”，
阴影偏移：{宽度：2，高度：2}，
阴影不透明度：0.4，
阴影半径：2，
标高：3，
为内容辩护：“中心”，
水平方向：30，
marginBottom:12
},
正文：{
尺码：18，
fontWeight:'400'，
颜色：“#080808”
}
});

---

这里有一个小吃显示它在工作

有一个margin属性给我带来了问题，所以更改了属性并将其放在最后

第一代码

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

如果有人能澄清它发生的原因