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

时间:2019-03-27 10:32:43

标签: reactjs react-native flexbox flex-direction

我使用以下代码:

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

结果是:

result

我认为正确的结果是:

expected result

为什么显示错了?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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