React Nativeの右のシェブロンでテキストを折り返すListViewアイテムレンダラーを表示

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; 

私が試したもう1つの選択肢は、ラベルが右から20pxの位置にあり、次に山形が右に絶対配置された絶対配置でした。私がそこに遭遇した問題は、個々のlistItemレンダラーのレンダリング（およびワードラップ）後の高さを把握しようとしていました。

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}を交換しています。