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

Question

problem: i want to achieve the effect as flowing:

i try to use view as the rounded rectangle，but it can't use in Android.

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

i also try use image as the rounded rectangle, but the text align vertical bottom.

So now i don't know how can to achieve the effect

Answer 1

try this way:

             <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

can you try this

  <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

Although I don't consider this a proper solution but this should work for longer lines of text:

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}
});

The concept is to create multiple text components split by blank space, this would allow the text to break. Again it's not an optimised solution but android doesn't support View inside the text so this is the workaround. Unless we come up with some proper solution.

You can also checkout this expo snack: https://snack.expo.io/rJpjWP_BQ