javascript - 如何制作顶部带有 Logo 标题的网格？

Question

我是 React Native 的新手，我想让这个布局成为可能我有以下代码，但它将 Logo 放在网格中

我要找的是这个

import React, { Component } from 'react';
import GridView from 'react-native-super-grid';


export default class ProfileScreen extends Component {
    static navigationOptions = {
        title: 'Details',
    };


    render() {
        const { navigate } = this.props.navigation;
        const items = [
            { name: require('./images/shopping-cart.png'),code: '#2ecc71' }, { name: require('./images/home.png'), code: '#2ecc71' },
            { name: require('./images/money-bag.png'), code: '#2ecc71' }, { name: require('./images/alert.png'), code: '#2ecc71' }
        ];

        return (
            <ImageBackground
                source={require('./images/marble.jpg')}
                style={styles.backgroundImage}>

                <View style={styles.mainLayout}>
                    <Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>
                    <GridView
                        itemDimension={130}
                        items={items}
                        style={styles.gridView}
                        renderItem={item => (
                            <View style={styles.itemContainer}>
                                <View style={styles.CircleShapeView}>
                                <Image style={styles.iconItem} source={item.name}/>
                                </View>
                            </View>
                        )}
                    />
                </View>
            </ImageBackground>
        );
    }
}


const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    CircleShapeView: {
        width: 100,
        height: 100,
        borderRadius: 100,
        backgroundColor: '#00BCD4',
        justifyContent: 'center',
        alignItems: 'center'
    },
    gridView: {
        paddingTop: 50,
        flex: 1,

    },
    itemContainer: {
        justifyContent: 'center',
        alignItems:'center',
        height:130
    },
    iconItem: {
        alignItems:'center',
        justifyContent: 'center'
    },
    logoFit: {
        width: imageHeight,
        height: imageWidth
    },
    mainLayout: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between'
    }
});

Answer 1

摆脱那个网格组件。这么简单的事情你不需要它。它使事情变得复杂，并且由于它不是常规/通用组件，我们不知道它是如何影响事情的。

这看起来很简单:

<View>
    <View style={{}}>
        <Image />
    </View>

    <View style={{flexDirection:'row'}}>
        <View>
            <Text>row 1, col 1</Text>
        </View>
        <View>
            <Text>row 1, col2Text>
        </View>
    </View>

    <View style={{flexDirection:'row'}}>
        <View>
            <Text>row 2, col 1</Text>
        </View>
        <View>
            <Text>row 2, col2Text>
        </View>
    </View>

    <View style={{}}>
        <Button title="Login" />
    </View>

</View>

这是另一个类似的问题 - How to create 3x3 grid menu in react native without 3rd party lib?