Неправильный результат в реакции-нативной, что я использую flexDirection

Question

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

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

и результат:

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

почему показывают неправильно?

Answer 1

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

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

Answer 2

используйте flex вместо высоты и ширины, как это:

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 в зависимости от себя. это всего лишь пример ...