错误结果导致我使用flexDirection的react-native

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

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

您可以根据自己的需要设置弹性。这只是一个例子...

Answer 2

我发现了问题，这是因为Genymotion中设置了位置，我在App.js中使用下面的代码来解决问题

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