Reactネイティブのテキストオーバーフローフレックス

Question

ListViewの行をセットアップしようとしていますが、メッセージ部分がオーバーフローしてテキストが右端の要素の後ろにあるように見えるという問題があります。それが後ろに流れるのを止める方法はありますか？おかげであなたは、コンテンツラッパービュー（Snack）の外で自分のアバターの表示を移動する必要が

return (
     <TouchableOpacity onPress={() => this.pressRow()}> 
      <View style={styles.messageWrapper}> 
       <View style={styles.messageContentWrapper}> 
        <View style={styles.avatarWrapper} > 
         <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 50, height: 50}}/> 
        </View> 
        <View style={styles.messageTextWrapper} > 
         <Text style={styles.messageName}>Holly Hayes</Text> 
         <Text style={styles.messageText}>Hi Matt! Do you want to meet for happy hour tonight? I will...</Text> 
        </View> 
       </View> 
       <View style={styles.messageRightSide}> 
        <Text style={styles.minutes}>37 Min</Text> 
        <Image source={require('../../images/icons/IconArrowRight.png')} style={{width: 20, height: 20}}/> 
       </View> 
      </View> 
     </TouchableOpacity> 
    ); 

var styles = StyleSheet.create({ 
    wrapper: { 
     backgroundColor: "#f6f6f6", 
     height: (screenHeight - 40), 
    }, 
    navWrapper: { 
     height: 40, 
     backgroundColor: "#fff", 
    }, 
    messageWrapper: { 
     padding: 20, 
     backgroundColor: "#fff", 
     marginLeft: 10, 
     marginRight: 10, 
     marginTop: 10, 
     //justifyContent: 'space-between', 
     flexDirection: "row", 
     flex: 1, 
    }, 
    listWrapper: { 
     paddingBottom: 10, 
    }, 
    messageRightSide: { 
     //justifyContent: 'space-between', 
     //alignItems: 'flex-end', 
     flex: 0.2, 
     backgroundColor: "green", 
    }, 
    minutes: { 
     color: "#1d1d26", 
     fontSize: 12, 
     fontFamily: "Avenir-Book", 
     marginBottom: 10, 
    }, 
    messageContentWrapper: { 
     backgroundColor: "blue", 
     flexDirection: "row", 
     flex: 0.8, 
    }, 
    avatarWrapper: { 
     overflow: "hidden", 
     borderRadius: 25, 
    }, 
    messageTextWrapper: { 
     marginLeft: 10, 
    }, 
    messageName: { 
     fontSize: 14, 
     fontFamily: "Avenir-Heavy", 
    }, 
    messageText: { 
     color: "#919191", 
     fontFamily: "Avenir-Light", 
     fontSize: 12, 
    } 
}); 

Answer 1

：

<TouchableOpacity onPress={() => this.pressRow()}> 
    <View style={styles.messageWrapper}> 
     <View style={styles.avatarWrapper} > 
      <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 50, height: 50}}/> 
     </View> 
     <View style={styles.messageContentWrapper}> 
      <View style={styles.messageTextWrapper} > 
       <Text style={styles.messageName}>Holly Hayes</Text> 
       <Text style={styles.messageText}>Hi Matt! Do you want to meet for happy hour tonight? I will...</Text> 
      </View> 
     </View> 
     <View style={styles.messageRightSide}> 
      <Text style={styles.minutes}>37 Min</Text> 
      <Image source={require('../../images/icons/IconArrowRight.png')} style={{width: 20, height: 20}}/> 
     </View> 
    </View> 
</TouchableOpacity>