具有样式化组件的React Native中的顶部中心和底部视图

Question

我正在尝试制作一个布局，我有3个Views，我想在顶部，中央和底部对齐一个。

const MyComponent = () => {
    return (
        <MainView>
            <TopView>
            </TopView>

            <CenterView>
            </CenterView>

            <BottomView>
            </BottomView>
        </MainView>
    )
}

我应该为每个View添加什么样式？

我尝试了text-align-vertical和justify-content的这么多组合，但是我不知道它是如何工作的。

我正在使用styled-components，但即使是普通样式也对我有好处。

Answer 1

您只需要将justifyContent: 'space-between'添加到MainView。

这里有个例子。您需要将样式转换为样式组件。

https://snack.expo.io/BJ4wFLcWr

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  view: {
    width: '100%',
    height: 100,
    borderWidth: 5,
    borderColor: '#000',
  }
});