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内，该位置固定在容器的边缘。然后，您可以使用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
  }
};

与flexbox对齐反应原生

2 个答案: