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