如何使这个网格顶部带有徽标标题？

Question

我是新手以反应本机，我想使这个布局成为可能我有以下代码，但它将徽标放在网格中

我正在寻找的是这个

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?

Answer 2

inside navigationOptions您应该删除title属性并定义标题属性并将Image放在那里。喜欢这个

   static navigationOptions = {
        header:(<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>)
    };

或者......你可以将标题设为null

   static navigationOptions = {
        header:null
    };

并且您当前的代码可以按照您希望的那样工作。