react-native - React Native ListView 项渲染器中右侧带有 V 形文字的文本换行

Question

我正在尝试显示一个与此类似的 ListView 。我试图解决的问题是关于标签的自动换行。我确实使用下面的代码使用它，但感觉就像一个黑客并且不适用于设备旋转。必须有一种方法可以在不使用维度和样式的情况下做到这一点。



这是我所拥有的。

import React, { Component } from 'react';

import {
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Text,
  View
} from 'react-native';

import Moment from 'moment'
import Icon from 'react-native-vector-icons/FontAwesome';

class ProjectListItemRenderer extends Component {

  componentDidMount() {
    //alert(Dimensions.get('window').height)

  }

  render() {

    return (
      <View style={styles.projectRow}>
        <View style={{width: Dimensions.get('window').width - 50}}>
          <Text style={styles.itemName}>{this.props.name}</Text>
          <Text style={styles.itemDetails}>{`${Moment(this.props.lastUpdated).fromNow()}`}</Text>
        </View>
        <View style={styles.moreContainer}>
          <Icon name="chevron-right" size={15} style={styles.moreIcon} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  projectRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    padding: 15,
   },

   itemName: {
     fontSize: 18,
     color: '#4A90E2',
   },

   itemDetails: {
     fontSize: 12,
     color: '#BBBBBB',
   },

   moreContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },

   moreIcon: {
     color: "#d6d7da"
   }

});

module.exports = ProjectListItemRenderer;

我尝试的另一个选项是绝对定位，标签距右侧 20 像素，然后绝对定位右侧的 V 形。我在那里遇到的问题是试图在渲染(和文字包装)后找出单个 listItem 渲染器的高度。

Answer 1

问题来自于 flexDirection: 'row'在 View包含您的文本。这使得文本向右溢出而不是换行。如果您希望文本换行，则包含 View必须有 flexDirection: 'column'在风格。

我已经相应地修改了您的代码:

import React, { Component } from 'react';

import {
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Text,
  View
} from 'react-native';

import Moment from 'moment'
import Icon from 'react-native-vector-icons/FontAwesome';

class ProjectListItemRenderer extends Component {

  componentDidMount() {
    //alert(Dimensions.get('window').height)
  }

  render() {

    return (
      <View style={styles.projectRow}>
        <View style={styles.projectText}>
          <Text style={styles.itemName}>{this.props.name}</Text>
          <Text style={styles.itemDetails>
            {`${Moment(this.props.lastUpdated).fromNow()}`}
          </Text>
        </View>
        <View style={styles.moreContainer}>
          <Icon name="chevron-right" size={15} style={styles.moreIcon} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  projectText: {
    flex: 1,
    flexDirection: 'column'
  },

  projectRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    padding: 15,
  },

   itemName: {
     fontSize: 18,
     color: '#4A90E2',
   },

   itemDetails: {
     fontSize: 12,
     color: '#BBBBBB',
   },

   moreContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },

   moreIcon: {
     color: "#d6d7da"
   }

});

module.exports = ProjectListItemRenderer;

唯一不同的是我换了 {width: Dimensions.get('window').width - 50}与 {flex: 1, flexDirection: 'column'} .