React Native中如何使用Flex实现组件居中？附代码求助

嘿，我看你在尝试让Screen组件在屏幕居中时遇到了麻烦，咱们来快速搞定这个问题～

首先看你当前的代码，你的Container样式只设置了flex:1和背景色，但flex布局下要实现居中，还需要添加两个关键属性。咱们来修改一下你的样式：

import { Provider } from 'react-redux'; // 别忘了导入Provider，你代码里用到了但没写导入
import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
import Screen from './ScreenContainer';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FF6666',
    flex: 1,
    justifyContent: 'center', // 控制垂直方向居中
    alignItems: 'center'      // 控制水平方向居中
  }
});

const App = () => (
  <Provider store={store}>
    <Container style={styles.container}>
      <Screen />
    </Container>
  </Provider>
);

export default App;

关键说明： #

• flex:1 让Container占满整个屏幕的可用空间，这是居中的基础；
• justifyContent: 'center' 会把容器内的子元素（也就是你的Screen组件）在垂直方向上居中；
• alignItems: 'center' 则是让子元素在水平方向上居中。

另外要注意一个坑：如果你的Screen组件本身设置了flex:1，它会直接撑满整个Container，这样你就看不到居中效果了。所以要检查ScreenContainer.js里的样式，确保它没有设置flex:1，或者给它指定固定的宽高，比如：

// 示例ScreenContainer.js里的样式
import { StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  screen: {
    width: 300,
    height: 400,
    backgroundColor: '#ffffff',
    borderRadius: 8
  }
});

const Screen = () => {
  return (
    <View style={styles.screen}>
      {/* 你的内容 */}
    </View>
  );
};

export default Screen;

这样调整后，你的Screen组件就能稳稳地显示在红色背景的屏幕正中间啦～

内容的提问来源于stack exchange，提问作者FabianoLothor