मैं एक साधारण टेक्स्ट आइटम के साथ एक साधारण सूची दृश्य घटक बनाता हूं।

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

मैं टेक्स्ट के लिए रैपर व्यू का उपयोग करता हूं। फिर टेक्स्ट को पूरी चौड़ाई में स्केल करने के लिए फ्लेक्सबॉक्स का उपयोग करें और इसकी सामग्री को बाईं ओर संरेखित करें। लेकिन परिणाम अपेक्षित नहीं है जब टेक्स्ट को केंद्र और रैप सामग्री के साथ संरेखित किया गया था (आवरण दृश्य भी सामग्री को लपेटता है)। इसे कैसे ठीक करें?

2
Hoang Lam 28 जुलाई 2017, 11:40

2 जवाब

आप स्क्रीन की चौड़ाई पाने के लिए 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)
  }
2
Jigar Shah 28 जुलाई 2017, 12:08

आप 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
  }
});
0
Jigar Shah 28 जुलाई 2017, 11:53