Flexbox 在react native中正确对齐ListView_Flexbox_React Native

Flexbox 在react native中正确对齐ListView

react-native

Flexbox 在react native中正确对齐ListView,flexbox,react-native,Flexbox,React Native,我的react native应用程序中有一个屏幕，显示记录的详细信息。这是一个非常简单的屏幕，在左栏，我有一个描述项目的标签，在右栏，我有项目的值。对于其中一个值，我必须呈现一个列表视图，但我无法正确对齐它。下面是rnplay上的示例应用程序，其中包含以下症状：请在iOS上运行。这里的ComponentListView是一个可重用的组件，我用它来呈现ListView，它以组件和数据作为支撑，并使用传入的组件来呈现数据中的每个条目。这里的列表是BackupList，每行中要呈现的组件是Back

我的

react native

应用程序中有一个屏幕，显示记录的详细信息。这是一个非常简单的屏幕，在左栏，我有一个描述项目的标签，在右栏，我有项目的值。对于其中一个值，我必须呈现一个

列表视图

，但我无法正确对齐它。下面是rnplay上的示例应用程序，其中包含以下症状：

请在iOS上运行。这里的

ComponentListView

是一个可重用的组件，我用它来呈现

ListView

，它以

组件和数据作为支撑，并使用传入的组件来呈现数据中的每个条目。这里的列表是BackupList
，每行中要呈现的组件是BackupSummary
。如果运行应用程序，您将发现备份未正确对齐。我在模拟器上的Inspector
中运行它，看起来ListView
从看到Varun Accepted
的地方开始。我不知道为什么。现在，this.props.backupContacts
中只有一项，但可能还有更多项。我尝试了许多不同的flexbox
属性，例如alignItems、justifyContent、alignSelf
，以使其正常工作，但没有成功
如果您知道如何修复它，请告诉我。
将您的应用程序放在视图中，并在视图上应用css，类似这样
<View style={{display:'flex', flexDirection:'row', justifyContent:'center'}}>
      <ListView/>
</View>


将您的应用程序放在一个视图中，并在视图上应用css，如下所示
<View style={{display:'flex', flexDirection:'row', justifyContent:'center'}}>
      <ListView/>
</View>


刚才我自己也尝试过同样的方法，但效果很好，当我看到你的解决方案时，它出现了堆栈溢出来更新问题。但是你的解决方案是正确的。你知道为什么列表视图
没有包装在视图
中就以这种方式出现吗？我想知道它只是为了我的理解，这样我就不会再犯同样的错误了。谢谢我想这是因为flex属性，比如“JustifyContent”可以在子组件上工作。我刚才也尝试过同样的方法，但它成功了，当我看到你的解决方案时，它出现了堆栈溢出来更新问题。但是你的解决方案是正确的。你知道为什么列表视图
没有包装在视图
中就以这种方式出现吗？我想知道它只是为了我的理解，这样我就不会再犯同样的错误了。谢谢我认为这是因为像“JustifyContent”这样的flex属性在子组件上起作用。