React Native：带有文本的内联图像

Question

我是对原生布局做出反应的新手。

我想把内联的句子用图像分隔，其中句子是内联的，图像就像逗号......

我做了一个包含数组的 json 文件，我在它上面创建了 map 函数，并在其中放置了文本标签和图像标签。

但是输出与我的设计不符。

import React, { Component } from 'react';
import image1 from './assets/image.jpg'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
} from 'react-native';
import Monday1 from "./data/monday1";
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ScrollView>
        <View style={{ marginRight: 20, marginLeft: 20, marginTop: 20 }}>
          <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            {Monday1.map((Monday1Text, key) =>
              <View style={styles.border2}>
                <View style={styles.border}>
                  <Text key={key} style={styles.text}>
                    {Monday1Text}
                  </Text>
                </View>
                <Image style={{ width: 50, height: 50, borderRadius: 50 }} source={{ uri: 'https://www.theladders.com/wp-content/uploads/Lion_030818-800x450.jpg' }} ></Image>
              </View>
            )}
          </View>
        </View>
      </ScrollView>
    )
  };
}

const styles = StyleSheet.create({
  border: {
    borderColor: 'red',
    borderStyle: 'solid',
    borderWidth: 2,
  },
  border2: {
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 5,
  },
  text: {
    fontSize: 22,
  },
  image: {
    overflow: 'hidden',
    ...Platform.select({
      android: {
        borderRadius: 25
      }
    }),
    height: 50,
    margin: 20,
    width: 50,
  },
});
export default App;

我希望我提供了足够的信息，感谢您的帮助，谢谢:)

Answer 1

React Native 原生支持文本中的内联图像：多亏了这一点 -提交你只需将图像放入 Text 组件，它就会被内联呈现。

例如：

<Text>
  <Image
    style={{
      width: 20,
      height: 20,
      borderRadius: 10,
    }}

    // Please. use the correct source =)) 
    source={require('../../static/user-ico.png')} 
  />
   Comments like this are just amazing. 
   You can write whatever you want and after that, you can check the result of this. 
   It can have more than 3 lines
</Text>

当然，您可以根据特定任务的需要组合任何文本组件和图像。

PS 在 android 和 RNWeb 上检查。