如何将文本包装在 ListView 内的 react native 中？答案

【问题标题】：How to wrap text in react native inside a ListView?如何将文本包装在 ListView 内的 react native 中？
【发布时间】：2018-09-20 05:48:32
【问题描述】：

我正在尝试制作像这样的简单消息气泡：

Desired outcome Image

但是，我不知道如何让红色背景只包裹文本。我一直在破坏这个：

Code output Image

import React, { Component } from 'react';
import { Container, Header, Content, Button, Left, Icon, Body, Title, Right } from 'native-base';
import { View, StyleSheet, TextInput, ScrollView, ListView, Text } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {text: '', dataSource: ds.cloneWithRows(['hi', 'My Name is adam']),};
  }

  render() { 
    return (
      <Container style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          style={styles.list}
          renderRow={(rowData) => 
              <Text style={styles.senderMessageText}>
                {rowData}
              </Text>
            }
        />
      </Container>
    );
  }
}


const styles = StyleSheet.create({
  container:{
    backgroundColor: 'green'
  },
  list:{
    backgroundColor:'blue'
  },
  senderMessageText: {
    backgroundColor:'red',
    padding: 8,
    marginTop: 10
  }
});

我已经尝试了一切..请帮助

【问题讨论】：

使用FlatList 而不是ListView。 ListView 已弃用，FlatList API 无论如何都要友好得多。
@MattyK14 我现在将切换到 FlatList.. 非常感谢！

标签： react-native

【解决方案1】：

试试这个解决方案： React Native: "Auto" width for text node

建议使用alignSelf 属性。使用alignSelf: 'flex-start'

PS：ListView 已弃用。请改用FlatList。对大数据有更好的表现

【讨论】：