react-native - 在 react native 中与 flexbox 对齐

Question

我的应用程序上有此屏幕，对应于此代码

  render() {
    return (

      <View style={styles.containerStyle}>
          <Chrono style={styles.svgStyle} fill="blue"/>
          <Button style={styles.buttonStyle}>Add</Button>
      </View>
    )

  }
}

const styles = {
  containerStyle: {
    flex: 1,
    flexDirection: 'column',
    marginBottom: 200,
    justifyContent: 'space-around'
  },
  svgStyle: {
    height: 180,
    width: 180
  },
  buttonStyle: {
   height: 20,
   width: 100,
   backgroundColor: '#00aeef',
   borderWidth: 5,
   borderRadius: 15
  }
};

我希望计时码表位于中心，按钮位于列（屏幕）的末尾。我正在努力使用 flexbox 来做到这一点，因为我知道没有 align-self 属性可用于沿主轴对齐。

实现这一目标的好方法是什么？

----EDIT---- 上面的组件（称为Starter）被包装在具有以下样式的视图中：

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Starter />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
});

Answer 1

尝试这样的事情：

<View style={styles.containerStyle}>
  <View style={{ flex: 1, jusifyContent: 'center', alignItems: 'center }}>
    <Chrono style={styles.svgStyle} fill="blue"/>
  <View>
  <Button style={styles.buttonStyle}>Add</Button>
</View>

Answer 2

尝试将组件放置在固定到容器边缘的Chrono绝对位置内。View然后，您可以使用and来定位Button组件，就好像该Chrono组件不存在一样（只要它是在其之后呈现的及其包装器。justifyContent: 'flex-end'marginBottom Chrono

  render() {
    return (

      <View style={styles.containerStyle}>
          <View style={styles.chronoWrapperStyle}>
              <Chrono style={styles.svgStyle} fill="blue"/>
          </View>
          <Button style={styles.buttonStyle}>Add</Button>
      </View>
    )

  }
}

const styles = {
  containerStyle: {
    flex: 1,
    flexDirection: 'column',
    marginBottom: 200,
    justifyContent: 'space-around'
  },
  chronoWrapperStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  svgStyle: {
    height: 180,
    width: 180
  },
  buttonStyle: {
   justifyContent: 'flex-end',
   marginBottom: 20,
   height: 20,
   width: 100,
   backgroundColor: '#00aeef',
   borderWidth: 5,
   borderRadius: 15
  }
};