居中放置一个项目，然后在左边有一个项目 - Flexbox React Native

问题描述

在React Native中使用flexbox我在尝试执行以下看似简单的任务时遇到了很多麻烦：

我在容器中有两个项目。我想一个居中，另一个直接躺在它的左边。

解决方案

您可以更改flex尺寸属性在两个外部组件中，只要它们相同，中间的项目就会居中。

注意第一个组件的justifyContent：'flex-end'属性。这种风格是什么使项目直接在中间项目的左侧。

 < View style = {styles。容器}> 
< View style = {styles.component1}> 
<文字>右< /文字> 
< / View> 
< View style = {styles.component2}> 
< Text style = {{textAlign：'center'}}>我是中心组件< / Text> 
< / View> 
< View style = {styles.component3}>< / View> 
< / View> 
 
容器：{
 flexDirection：'row'，
 flex：1，
 marginTop：60 
}，
 component1：{
 flex：1，
 flexDirection：'row'，
 justifyContent：'flex-end'，
 height：80 
}，
 component2：{
 flex：1，
 height：80，
 backgroundColor：'red'，
 justifyContent：'center'
}，
 component3：{
 flex：1，
} 
  

另外，整个代码如下：

 'use strict'; 
 
 var React = require（'react-native'）; 
 var {
 AppRegistry，
 StyleSheet，
 Text，
 View，
} = React; 
 
 SampleApp = React.createClass（{
 render：function（）{
 return（
< View style = {styles.container}> 
< View style = {styles.component1}> 
< Text> Right< / Text> 
< / View> 
< View style = {styles.component2} > 
< / text> 
< / View> 
< View style = {{textAlign：'center'}}>我是中心组件< / Text> styles.component3}>< / View> 
< / View> 
）; 
} 
}）; 
 
 var styles = StyleSheet.create（{
 container：{
 flexDirection：'row'，
 flex：1，
 marginTop：60 
 $ b $ {
 flex：1，
 flexDirection：'row'，
 justifyContent：'flex-end'，
 height：80 
 $ b组件2：{
 flex：1，
 height：80，
 backgroundColor：'red'，
 justifyContent：'center'
 }，
 component3：{
 flex：1，
} 
}）; 
 
 AppRegistry.registerComponent（'SampleApp'，（）=> SampleApp）; 
  

Using flexbox in React Native I'm having a lot of trouble trying to do the following seemingly simple task:

I have two item inside a container. I want one centered, and the other one to lie directly to the left of it.

解决方案

You can change the flex size properties of the two outer components, and as long as they are the same, the middle item will be centered.

Notice the justifyContent:'flex-end' property of the first component. This styling is what is making the item lie directly to the left of the middle item.

  <View style={styles.container}>
    <View style={styles.component1}>
        <Text>Right</Text>
    </View>
    <View style={styles.component2}>
        <Text style={{ textAlign:'center' }}>I am the Center Component</Text>
    </View>
    <View style={styles.component3}></View>
  </View>

  container: {
    flexDirection:'row',
    flex:1,
    marginTop:60
  },
  component1: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    height:80
  },
  component2: {
    flex:1,
    height:80,
    backgroundColor: 'red',
    justifyContent:'center'
  },
  component3: {
    flex:1,
  }

Also, the entire code is below:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.component1}>
                    <Text>Right</Text>
        </View>
        <View style={styles.component2}>
            <Text style={{ textAlign:'center' }}>I am the Center Component</Text>
        </View>
        <View style={styles.component3}></View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flexDirection:'row',
    flex:1,
    marginTop:60
  },
  component1: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    height:80
  },
  component2: {
    flex:1,
    height:80,
    backgroundColor: 'red',
    justifyContent:'center'
  },
  component3: {
    flex:1,
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

这篇关于居中放置一个项目，然后在左边有一个项目 - Flexbox React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！