react-native - {弹性 :1} is not working properly in React Native

Question

如果我理解正确——将最外面的容器设为“flex: 1”应该让组件横跨整个屏幕。

但是，我写的代码不能正常工作。

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

export default function test() {
    return (
        <View style={{ flex: 1, borderColor: 'red', borderWidth: 5 }}>
            <Text>test</Text>
        </View>
    );
}

The simulator screenshot is here

谁能指出我哪里做错了？

非常感谢!

Answer 1

你在哪里调用这个组件？是的，flex 会展开，但它依赖于那个父组件容器。看起来您的 parent 是限制此组件的人。

确保父级也在弯曲和填充内容。以下是有关 flex 布局的更多详细信息:https://facebook.github.io/react-native/docs/flexbox