带有样式组件的 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。

这里有一个例子。您需要将样式转换为 Styled-Components.

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',
  }
});

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

Top Center and Bottom View in React Native with styled components

react-native

styled-components