android - React Native 中 View 的网格布局

Question

我正在尝试创建一个像这样的布局的 React Native View 。我怎样才能创建一个盒子，就像图像上的一个盒子一样？

是否可以使用 Flex 实现这一目标？我需要一个用于数字(左)，一个用于文本(右，上)和另一个文本(右，下)？它们的顺序应该与图片上的顺序相同。

Answer 1

我建议您学习 flexbox 样式规则。

设计如此简单的屏幕会让您的生活更轻松。

你的渲染方法应该是这样的:

render() {
    return (
        <View style={styles.containerStyle}>
            <Text style={styles.numberStyle}>6</Text>
            <View style={styles.textContainerStyle}>
                <Text>D in 227 -</Text>
                <Text>Vtr. Online Lehrer</Text>
            </View>
        </View>
    );
}

您的样式应如下所示:

const styles = {
    containerStyle: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around'
    },
    numberStyle: {
        flex: 1
    },
    textContainerStyle: {
        flex: 4,
        flexDirection: 'row',
        justifyContent: 'center' 
    }
}

注意:我没有测试输出，但它应该可以工作。如果它没有按预期工作，请随时问我。

你可以在这里学习flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

上面的链接是针对 css 的，但如果您了解了它，那么您也可以在 React Native 中进行类似的应用。