Блог

Главная - Вопросы по программированию - Неправильный результат в react-native при использовании flexDirection

Неправильный результат в react-native при использовании flexDirection

#reactjs #react-native #flexbox

#reactjs #react-native #flexbox

Вопрос:

Я использую приведенный ниже код:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={{paddingTop:30,flexDirection:'row',}}>
        <View style={{backgroundColor:'red',width:50,height:50}}><Text>1</Text></View>
        <View style={{backgroundColor:'green',width:50,height:50}}><Text>2</Text></View>
      </View>
    );
  }
}

и в результате получается:

Результат

Я думаю, что правильный результат должен быть:

ожидаемый результат

почему результат не такой, каким я его ожидаю?

Комментарии:

1. у вас есть rtl поддержка вашего приложения?

2. Я не использовал, я использовал другой код, возможно, один из них поддерживает rtl, как я могу его найти?

3. оформить заказ в файле AndroidManifest android:supportsRtl="true"

4. Я ищу supportsRtl в своей программе, но ничего не могу найти

5. Если я использую ваш код, я правильно получаю красный квадрат 1 слева и зеленый квадрат 2 справа. Возможно, у вас здесь проблема с RTL (или flexDirection)… Вы можете проверить это, написав пару слов в компоненте <Text> и посмотреть, как это отображается…

Ответ №1:

используйте flex вместо height и width вот так:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={{paddingTop:30,flexDirection:'row',}}>
        <View style={{backgroundColor:'red',flex:.5}}><Text>1</Text></View>
        <View style={{backgroundColor:'green',flex:.5}><Text>2</Text></View>
      </View>
    );
  }
}

вы можете настроить flex по своему усмотрению. это всего лишь пример…

Ответ №2:

Я нахожу проблему, это из-за местоположения, заданного в Genymotion, я использую приведенный ниже код в App.js и решить проблему

 import {I18nManager} from 'react-native'
I18nManager.forceRTL(false)