Question

我正在尝试显示类似于此的列表视图。我试图解决的问题是关于标签的自动换行。我确实让它使用下面的代码，但它感觉像一个黑客，并不适用于设备轮换。必须有一种方法可以在不使用尺寸和样式的情况下完成。

这就是我所拥有的。

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;

我尝试的另一个选项是绝对定位，标签距离右边20px，然后绝对定位右边的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'}。

在React Native ListView项呈示器中右侧带有V形符号的文本换行

1 个答案: