React Native：ListView項不能縮放全寬

Question

我用簡單的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將文本縮放爲全寬並將其內容與左側對齊。但結果並不像預期的那樣，當文本對齊中心和包裝內容（包裝視圖也包裝內容）。如何解決這個問題？

Answer 1

剛上風格itemText添加flex像：

itemText: { 

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

} 

我在模擬器顯示

，如：

我希望我的回答能幫助你..

Answer 2

您可以使用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 
    } 
}); 

Answer 3

您可以使用Dimensions爲好，讓屏幕的寬度並分配給text

從原產地進口尺寸

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

分配width到text：

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