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

更改代码以将Component作为类导入：

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

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

Answer 2

您在哪里调用此组件？是的，flex将会扩展，但是它依赖于该父组件容器。看来您的父母是限制此组件的人。

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

{flex：1}在React Native中无法正常工作

2 个答案: