Question

问题：我想达到流动的效果：

我尝试使用view作为圆角矩形，但是在Android中无法使用。

<Text>
 <View></View>
 <Text></Text>
</Text>

我也尝试使用图像作为圆角矩形，但文本在垂直底部对齐。

所以现在我不知道该如何达到效果

Answer 1

尝试这种方式：

             <Text>
                <View style={{ borderWidth:1, borderColor:'#a2a2a2', borderRadius:6 }}>
                <Text > ADAFAF </Text>
                </View>
                <Text> styleborder Width style border Width style borderWidth style borderWidth styleborderWidth</Text>
            </Text>

Answer 2

你可以试试吗

  <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>

Answer 3

尽管我不认为这是一个合适的解决方案，但这应该适用于更长的文本行：

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

如何在React-Native中实现文本环绕视图

3 个答案: