如何对齐2个反应本地元素，1在中心和1在开始 [英] How to align 2 react native elements, 1 being in the center and 1 on the beginning

问题描述

让我们假设我们有这些原生样式：

  var styles = StyleSheet.create（{
 parentView ：{
 width：400，
 height：150 
}，
 containerView：{
 flex：1，
 flexDirection：'row'，
 alignItems：'center'，
 justifyContent：'center'，
 backgroundColor：'black'
}，
 child1：{
 backgroundColor：'red'， 
 alignSelf：'flex-start'
}，
 child2：{
 backgroundColor：'yellow'
} 
} 
  

并且我们有这个渲染函数：

  render：function（）{
 return（
< View style = {styles.parentView}> 
< View style = {styles.containerView}> 
< Text style = {styles.child1}> Child1< / Text> 
< Text style = {styles.child2}> Child2< / Text> 
< / View> 
< / View> 
）; 
 
 
 
 
 
 
这段代码产生这个图像：
  
 
 
 
 非常非常重要：我希望 child2 在<$ c中居中 TOTALLY  $ c> containerView ，并且由于 child1 占据的空间而不在右边。
 
 
 
如何在react-native中实现这个功能？
 
 
 
 ps：请记住，这将运行在许多分辨率上比例），因此，不能以绝对的方式设置，只能在某些屏幕上工作，而不能在其他屏幕上工作。
解决方案
不知道这是否是最好的方法，但它适用于我
  render（）{
 return（
< View style = {styles.parentView}> 
< View style = {styles.containerView}> 
< View style = {styles.rowContainer}> 
< View style = {styles.rowItem}> 
< Text style = {styles.child1}> Child1< / Text> 
< / View> 
< View style = {styles.rowItem}> 
< Text style = {styles.child2}> Child2< / Text> 
< / View> 
< / View> 
< / View> 
< / View> 
）; 
 
 $ style = StyleSheet.create（{
 parentView：{
 width：400，$ b $ height：150 
}，
 containerView： {
 flex：1，
 flexDirection：'row'，
 alignItems：'center'，
 backgroundColor：'black'
}，
 rowContainer： {
 flex：1，
 flexDirection：'column'，
}，
 rowItem：{
 flex：1 
}，
 child1 ：{
 backgroundColor：'red'，
 position：'absolute'，
}，
 child2：{
 alignSelf：'center'，
 backgroundColor ：'yellow'
} 
}）; 
  
 
Lets assume that we have those react native styles:
var styles = StyleSheet.create({
  parentView:{
    width: 400,
    height:150
  },
  containerView:{
    flex:1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'black'
  },
  child1:{
    backgroundColor: 'red',
    alignSelf: 'flex-start'
  },
  child2: {
    backgroundColor: 'yellow'
  }
}
and that we have this render function:
render: function(){
  return(
      <View style={styles.parentView}>
        <View style={styles.containerView}>
          <Text style={styles.child1}>Child1</Text>
          <Text style={styles.child2}>Child2</Text>
        </View>
      </View>
    );  
}
This code produces this image:


but what I want to achieve is this image:


VERY VERY IMPORTANT: I want child2 to be TOTALLY centered within the containerView, and not a bit far to the right because of the space that child1 occupies.

How can I achieve that in react-native?* 

p.s.: Keep in mind that this will run on many resolutions (many screens with different aspect ratios) thus, it cannot be set in an absolute way that would result on it only working on "some" screens but not on others.
解决方案
not sure if this is the best way to do it, but it works for me 
render() {
    return(
      <View style={styles.parentView}>
      <View style={styles.containerView}>
        <View style={styles.rowContainer}>
          <View style={styles.rowItem}>
            <Text style={styles.child1}>Child1</Text>
          </View>
         <View style={styles.rowItem}>
            <Text style={styles.child2}>Child2</Text>
         </View>
        </View>
      </View>
    </View>
  );

const styles = StyleSheet.create({
  parentView:{
    width: 400,
    height:150
  },
  containerView:{
    flex:1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor:'black'
  },
  rowContainer: {
    flex: 1,
    flexDirection: 'column',
  },
  rowItem:{
    flex: 1
  },
  child1:{
    backgroundColor: 'red',
    position: 'absolute',
  },
  child2: {
    alignSelf: 'center',
    backgroundColor: 'yellow'
  }
});


                        
这篇关于如何对齐2个反应本地元素，1在中心和1在开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！