当我使用 flexDirection 时，反应原生的错误结果答案

【问题标题】：Wrong result in react-native when I use flexDirection当我使用 flexDirection 时，反应原生的错误结果
【发布时间】：2020-08-13 03:45:37
【问题描述】：

我使用下面的代码：

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

结果是：

我认为正确的结果应该是：

为什么结果不是我期望的那样？

【问题讨论】：

您的应用有 rtl 支持吗？
我没用过，我用了不同的代码，也许其中一个支持rtl，我怎么找到它？
签出androidManifest文件android:supportsRtl="true"
我在程序中搜索supportsRtl，但找不到任何东西
如果我使用您的代码，我会正确获得左侧的红色方块 1 和右侧的绿色方块 2。可能您在这里遇到了 RTL（或 flexDirection）问题...您可以检查它在组件中写入几个单词并查看它是如何呈现的...

标签： reactjs react-native flexbox

【解决方案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>
    );
  }
}

你可以根据自己设置弹性。这只是一个例子......

【讨论】：

【解决方案2】：

我找到了问题，是因为在Genymotion中设置的位置，我在App.js中使用下面的代码并解决了问题

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

【讨论】：