[英]React native: Inline image with text
I am new to react native layout.我是反应原生布局的新手。
I want to put inline sentences separated by images, in which sentences are inline and images are like commas...我想用图像分隔内联句子,其中句子是内联的,图像就像逗号......
I did a json file that contains an array, which i make map function on it and in it I put text tag and image tag.我做了一个包含数组的 json 文件,我制作了 map function 并在其中放置了文本标签和图像标签。
But the output did not match my design.但是 output 不符合我的设计。
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;
I hope I gave enough information and I appreciate any help, thank you:)我希望我提供了足够的信息,并感谢任何帮助,谢谢:)
React Native supports inline images in text natively: thanks to this - commit you can just put the image into the Text component and it will be rendered inline. React Native 原生支持文本中的内联图像:多亏了这个 - 提交,您可以将图像放入 Text 组件中,它将被内联渲染。
For example:例如:
<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>
For sure you can combine any Text component and Image as needed in your particular task.当然,您可以在特定任务中根据需要组合任何文本组件和图像。
PS checked on android and RNWeb. PS检查了android和RNWeb。
I suggest you set { flexDirection: 'row', flexWrap: 'wrap' }
to the <View style={styles.border2}>
, and wrap every word (not a block of words, but every word ) within a Text
, and setting the lineHeight
of those Text
s to the same height as the Image
, and you should be done我建议您将{ flexDirection: 'row', flexWrap: 'wrap' }
设置为<View style={styles.border2}>
,并将每个单词(不是单词块,而是每个单词)包装在Text
中,并且将这些Text
的lineHeight
设置为与Image
相同的高度,你应该完成
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.