React Native 中的 Flexbox

Question

我有一个SafeAreaView，我正在尝试对其应用一些样式。

如果我使用内联样式，我的文本会在屏幕上居中。

const thisStyle = {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
}

    <SafeAreaView  style={thisStyle}>
      ...
    </SafeAreaView>

但是，如果我在 scss 文件中定义样式并将其导入到我的组件中，则不会应用弹性框。

import styles from './login.scss';

...


<SafeAreaView  style={styles.container}>
  ...
</SafeAreaView>

scss:

@import './src/base.scss';

    .container {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: $plump-purple;
        align-items: 'center';
        justify-content: 'center'
    }

请注意，其他属性可以正常工作（背景改变颜色），唯一看起来不工作的是 flexbox。我错过了什么吗？

Answer 1

以这种方式使用它。

主类

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import styles from './styles';

export default class Example extends Component {
  render() {
    return <SafeAreaView style={styles.container}>...</SafeAreaView>;
  }
}

样式类

import { StyleSheet } from 'react-native';

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