React Native：ListView 项目不缩放全宽答案

【问题标题】：React Native: ListView item does not scale full widthReact Native：ListView 项目不缩放全宽
【发布时间】：2017-07-30 14:53:48
【问题描述】：

我用一个简单的 Text 项创建了一个简单的 ListView 组件。

import React from "react";
import { StyleSheet, Text, View, ListView } from "react-native";

export default class NoteList extends React.Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        r1 !== r2;
      }
    });
  }

  render() {
    return (
      <ListView
        dataSource={this.ds.cloneWithRows([
          { title: "Note 1", body: "Body 1", id: 1 },
          { title: "Note 2", body: "Body 2", id: 2 }
        ])}
        renderRow={rowData => {
          return (
            <View style={styles.itemContainer}>
              <Text style={styles.itemText}>
                {rowData.title}
              </Text>
            </View>
          );
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    borderColor: "red",
    borderWidth: 1
  },

  itemText: {
    padding: 16,
    borderColor: "blue",
    borderWidth: 1
  }
});

我对文本使用包装器视图。然后使用 FlexBox 将 Text 缩放到全宽并将其内容向左对齐。但是当 Text 居中对齐并包裹内容（包裹视图也包裹内容）时，结果并不像预期的那样。如何解决这个问题？

【问题讨论】：

创建组件text 到全宽是什么意思？
试试这个它对我有用enter link description here

标签： listview react-native

【解决方案1】：

您也可以使用Dimensions 来获取屏幕宽度并分配给text

从 react-native 导入维度

import { StyleSheet, Text, View, ListView, Dimensions } from "react-native";

将width 分配给text：

itemText: {
    padding: 16,
    borderColor: "blue",
    borderWidth: 1,
    width: (Dimensions.get('window').width)
  }

【讨论】：

【解决方案2】：

只需在样式itemText 上添加flex 即可：

itemText: {

    flex: 1,
    padding: 16,
    borderColor: "blue",
    borderWidth: 1

}

在我的模拟器中显示如下：

希望我的回答能帮到你..

【讨论】：

【解决方案3】：

你可以使用react-native-easy-grid，在这种情况下会很容易设计

实现的例子：

import React from "react";
import { StyleSheet, Text, View, ListView } from "react-native";
import {Col} from 'react-native-easy-grid';
 // 0.1.15

export default class NoteList extends React.Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        r1 !== r2;
      }
    });
  }

  render() {
    return (
      <ListView
        dataSource={this.ds.cloneWithRows([
          { title: "Note 1", body: "Body 1", id: 1 },
          { title: "Note 2", body: "Body 2", id: 2 }
        ])}
        renderRow={rowData => {
          return (
            <View style={styles.itemContainer}>
              <Col>
              <Text style={styles.itemText}>
                {rowData.title}
              </Text>
              </Col>
            </View>
          );
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    borderColor: "red",
    borderWidth: 1
  },

  itemText: {
    padding: 16,
    borderColor: "blue",
    borderWidth: 1
  }
});

【讨论】：