如何使用样式导出react-native组件

I have a Header component which looks like this :

我有一个Header组件，如下所示：

When I try to import this to another component, its spreading to the whole screen. I tried to pass style props and change the height but it isn't working.

当我尝试将其导入另一个组件时，它会扩散到整个屏幕。我试图传递样式道具并改变高度，但它不起作用。

In the Header.js

在Header.js中

import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Text, Navigator } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

const h = Dimensions.get('window').height;
const w = Dimensions.get('window').width; //360

export default class Header extends Component{

    render(){
        return(
                <View style = {[styles.headerStyle, this.props.style]}>
                    <View style={styles.icon}>
                        <MaterialCommunityIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="cart-outline" size={25} />
                    </View>
                    <View style={styles.icon}>
                        <FontAwesome.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="comment-o" size={25} />
                    </View>
                    <View style={styles.icon}>
                        <MaterialIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="notifications-none" size={25} />
                    </View>
                    <View style={styles.icon}>
                        <MaterialIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="help-outline" size={25} />
                    </View>
                    <View style={styles.menuStyle}>
                        <SimpleLineIcons.Button backgroundColor="#FDA74A" name="menu" size={25} onPress={() => this.props.navigation.navigate('DrawerOpen')} underlayColor="#FDA74A"/>
                    </View>
                    <View style = {styles.headerTextViewStyle}>
                        <Text text={this.props} style={styles.headerTextStyle}>{this.props.text}
                        </Text>
                    </View>
                </View>
        );
    }
}
const styles = StyleSheet.create({
    menuStyle: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
   },
    headerStyle:{
        backgroundColor: '#FDA74A',
        flex: 1,
        width: w,
        height:h/5,
        flexDirection: 'row-reverse',
    },
    icon:{
        marginRight:0,
        marginLeft:0
    },
    headerTextStyle:{
        position:'absolute',
        justifyContent: 'space-between',
        fontSize: 28,
        color: '#FFFFFF',
        margin: 0.045*w,
    },
    headerTextViewStyle:{
        flexDirection:'column-reverse'
    }
});

In the Wallet.js(where I want this Header)

在Wallet.js（我想要这个标题）

import React, { Component } from 'react';
import {Text, View, StyleSheet, Dimensions} from 'react-native';
import Header from './Header';

const h = Dimensions.get('window').height;
const w = Dimensions.get('window').width;

export default class Wallet extends Component {
    constructor(props){
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style= {styles.containerStyle}>
                <Header style={styles.headerStyle}
                        text="Your Wallet" />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle:{
        flex:1,
        backgroundColor:'white',
    },
    headerStyle:{
        height:h/5,
    },
});

See this Header Image --> Header

请参阅此标题图像 - >标题

I want a common Header just like shown in the image throughout the application for all of the screens. Please let me know if you know how to do it ?

我希望在整个应用程序中为所有屏幕显示一个共同的标题。如果你知道怎么做，请告诉我？

1 个解决方案

#1

This is caused due to flex. If you notice, you're using flex: 1 in both the components. Adding a child component other than header in Wallet.js with greater flex value e.g flex: 3 or flex: 4 (as per your app UI) may solve the issue.

这是由于flex引起的。如果你注意到，你在两个组件中使用flex：1。在具有更大弹性值的Wallet.js中添加除头部之外的子组件，例如flex：3或flex：4（根据您的应用UI）可以解决该问题。

UPDATE

UPDATE

All you have to do is add another component/View in Wallet.js

您所要做的就是在Wallet.js中添加另一个组件/ View

render() {
  return (
    <View style= {styles.containerStyle}>
      <Header 
        style={styles.headerStyle}
        text="Your Wallet" 
      />
      <View style={{flex:4}}>
        <Text style: {{fontSize: 18}}>
          Replace your main/body component instead of this view
        </Text>
       </View>
    </View>
  );
}

#1