[英]How to achieve text surround view in react-native
你可以试试这个吗
<View style={{flex:1}}>
<View style={{justifyContent:'flex-start',flexDirection:'row', marginTop:10}}>
<View style={{ borderWidth:1, borderColor:'#a2a2a2', borderRadius:6, height:25, padding:2}}>
<Text> hhshs </Text>
</View>
<Text style={{marginLeft:10}}> side content </Text>
</View>
<Text style={{marginLeft:10, marginTop:10}}>down content</Text>
</View>
虽然我认为这不是一个合适的解决方案,但是它应该适用于更长的文本行:
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.section}>
<View style={styles.button}>
<Text> TEST </Text>
</View>
{
"lorem ipsum dollar smit lorem ipsum dollar smit lorem ipsum dollar smit lorem ipsum dollar smit lorem ipsum dollar smit lorem ipsum dollar smit lorem ipsum dollar smit".split(" ").map(val=>{
return (<Text> {val}</Text>);
})
}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {padding: 50},
section:{flexDirection:'row', flexWrap:"wrap", alignItems:"center"},
button: { borderWidth:1, borderColor:'#222', borderRadius:6, padding:5, backgroundColor:"#eee", justifyContent:"center", marginBottom: 10}
});
概念是创建多个由空白分隔的文本组件,这将使文本断裂。 同样,它不是一个优化的解决方案,但android不支持在文本内部查看,因此这是解决方法。 除非我们提出一些适当的解决方案。
您还可以签出此博览会小吃: https : //snack.expo.io/rJpjWP_BQ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.