React Native ListView项渲染器中带有右侧尖括号的文本换行

Question

我正在尝试显示一个类似于这样的列表视图。 我要解决的问题是标签的换行。 我已经使用下面的代码使其工作，但感觉像是一个hack，并且无法与设备旋转一起使用。 必须有一种方法可以在不使用Dimensions和样式的情况下完成它。

这是我拥有的。

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像素，然后将chevron绝对定位在右侧。我遇到的问题是在渲染器呈现（并换行）后尝试确定每个listItem渲染器的高度。

- abritez

Answer 1

问题出在包含文本的View上设置了flexDirection: 'row'。这会导致文本向右溢出而不是换行。如果您想要文本换行，包含文本的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;

唯一的区别是我用{flex: 1, flexDirection: 'column'}替换了{width: Dimensions.get('window').width - 50}。

- Mika Kuitunen

---

该死，我本来以为我试过了！当时测试时可能我的代码有问题。这个可以正常工作。谢谢！ - abritez