文本超过 Iphone 上的视图

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

带有黄色背景的文本部分呈现在带有黑色边框的视图之外。

这可以在这里测试：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>
    );
  }
}

Answer 2

如果我测量屏幕宽度并从中减去其余部分，看起来我想要它，但这不是一个优雅的解决方案：

https://snack.expo.io/r1xCX5td-

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



export default class App extends Component {
  render() {
      let stretchWidth = Dimensions.get('window').width - 240;

    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 style={{flexDirection: 'row'}}>
                  <Text style={{width:50}}>Test</Text>
              </View>

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

文本超过 Iphone 上的视图

Text exceeds View on Iphone

ios

react-native

expo