IT技术 - 如何对齐 2 个react-native元素，1 个在中心，1 个在开头 - 吾爱随笔录

让我们假设我们有那些react-native样式：

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被TOTALLY内的中心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> ); 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' } });