React 原生 Flexbox 未使用所有可用空间

Question

我想使用 {flex:1} 将容器居中

Answer 1

正如您在我的示例中所看到的，它按预期工作。 我对背景进行了着色，以便您可以看到完整的可用空间已被使用。

import { Text, View, StyleSheet } from 'react-native';

export default function () {
  return (
    <View style={styles.container}>
      <Text>flex1</Text>
      <Text>flex2</Text>
      <Text>flex3</Text>
    </View>
  );
}

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

编辑：

尝试添加

width

和

height

100%：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    height: "100%",
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
});