ios - 文字超出 iPhone 上的 View

Question

检查这个片段:

import React, { Component } from 'react';
import { Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{margin: 80}}>
        <View style={{ padding: 5, backgroundColor: 'honeydew', borderWidth: '1', borderColor: 'black'}}>
          <View style={{margin:5, flexDirection: 'row'}}>
              <View>
                  <Text style={{width:50}}>Test </Text>
              </View>

              <View style={{backgroundColor:'yellow'}}>
                  <Text>this text exceeds the bordered view on iphone, should just wrap and fill the view</Text>
              </View>
          </View>
        </View>
      </View>
    );
  }
}

黄色背景的文本部分渲染在带有黑色边框的 View 之外。

这可以在这里测试:https://snack.expo.io/HJRRjutuW

为什么它不能正确呈现？我应该改变什么才能做到这一点？

Answer 1

只需从

中删除 flexDirection: 'row'

<View style={{margin:5, flexDirection: 'row'}}>

还更新了零食

https://snack.expo.io/rJ6N8tKdb

或者您可以添加flexWrap

<View style={{margin:5, flexDirection: 'row',flexWrap: 'wrap'}}>

输出会像

编辑

import React, { Component } from 'react';
import { Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{margin: 80}}>
        <View style={{ padding: 5, backgroundColor: 'honeydew', borderWidth: '1', borderColor: 'black'}}>
          <View style={{margin:5, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between'}}>
              <View >
                  <Text style={{width:50}}>Test </Text>
              </View>

              <View style={{flex:1,backgroundColor:'yellow'}}>
                  <Text>this text exceeds the bordered view on iphone, should just wrap and fill the view</Text>
              </View>
          </View>
        </View>
      </View>
    );
  }
}