Question

嗨，我有一个小问题，我不知道为什么我的文本不希望被包裹，但是相同的代码在其他屏幕上对我有用，但在下面的屏幕上我不想工作？这是我手机的一些屏幕截图 image 1 image 2

这是我的代码

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

const Part = (props) => (
    <View style={{ flexDirection: 'row', marginHorizontal: 20, marginVertical: 10 }}>
      <Text style={{ marginHorizontal: 10 }}>-</Text>
      <View>
          <Text style={{ flexWrap: 'wrap' }}>{props.name}</Text>
          {props.adress !== null ? <View style={{ flexDirection: 'row' }}>
              <Text>Adresse : </Text>
              <View style={{ flexDirection: 'row' }} >
              <Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
              </View>
          </View> : null }
          {props.tel !== null ? <View style={{ flexDirection: 'row' }}>
              <Text>Tél : </Text>
              <View>
                  {props.tel.map((tel) => (
                          <Text>{tel}</Text>
                      )
                  ) }
              </View>
          </View> : null }
          {props.fax !== null ? <View style={{ flexDirection: 'row' }}>
              <Text>Fax : </Text>
              <View>
                  {props.fax.map((fax) => (<Text>{fax}</Text>))}
              </View>
          </View> : null}
      </View>
    </View>
 );


export default Part;

Answer 1

按百分比给宽度，例如

<View style={{ flexDirection: 'row'' }}>
          <Text>Adresse : </Text>
          <View style={{ flexDirection: 'row',width:'50% }} >
          <Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
          </View>

如何在屏幕内换行？

1 个答案: