Question

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

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

在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'
    }
});

在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,
    },
});

查看此标题图片 - ＆gt; Header

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

Answer 1

这是由flex引起的。如果您注意到，则在两个组件中都使用flex: 1。添加{strong> Wallet.js 中标题以外的child component flex值更高，例如flex: 3或flex: 4（根据您的应用用户界面）可以解决这个问题。

<强>更新

您所要做的就是在 Wallet.js

中添加其他组件/视图

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>
  );
}

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

1 个答案: