React Native - 将文本分成几行

Question

我有以下布局：

<View style={{ backgroundColor: 'yellow' }}>
  <Text style={{ backgroundColor: 'white' }}>text text text text text text text text text text text text text text text text text text text text text</Text>
  <Image source={require('some.png')} />
</View>

我希望文本具有图像的宽度并自动分成多行。是否可以不获取图像宽度并以编程方式设置容器或文本宽度？

Answer 1

实现此目的的一种方法是使用文本组件上的

flexShrink

 属性和 flex 属性来确保图像确定宽度。

这是更新后的代码：

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';


    <View style={styles.container}>
      <Text style={styles.text}>
        text text text text text text text text text text text text text text text text text text text text text
      </Text>
      <Image source={require('./some.png')} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'yellow',
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
  },
  text: {
    backgroundColor: 'white',
    flexShrink: 1,
    flexBasis: 'auto',
  },
  image: {
    width: 100, 
    height: 100, 
  },
});