我是 React Native 的新手。我有一个正在附加的屏幕。
My code for this screen is below for the screen
export default class Prabhuji extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.imageContainer}>
<StatusBar
barStyle="default"
/>
<ImageBackground
source={{uri:'https://wallpaperbrowse.com/media/images/4643298-images.jpg'}}
style={{width: '100%', height: '100%',}}>
<View style={{backgroundColor: 'rgba(52, 52, 52, 0.0)', margin:15,paddingTop:5}}>
<Text style={{ color:"#fff", fontSize: 30,fontWeight: 'bold'}}>Shravan Pack</Text>
<Text style={{ color:"#fff", fontSize: 30,fontWeight: 'bold'}}>Rs.91/Day</Text>
</View>
</ImageBackground>
</View>
<View style={styles.navContainer}>
<View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
<View style={{flex:2,backgroundColor:"#E91E63"}}></View>
<View style={{flex:5,backgroundColor:"#EC407A"}}></View>
</View>
<View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
<View style={{flex:2,backgroundColor:"#388E3C"}}></View>
<View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
</View>
<View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
<View style={{flex:2,backgroundColor:"#FFAB00"}}></View>
<View style={{flex:5,backgroundColor:"#FFD740"}}></View>
</View>
</View>
<View style={styles.balanceContainer}>
<View style={{flex:3,backgroundColor:"#388E3C"}}></View>
<View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
</View>
</View>
);
}
}
My StyleSheet Is:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
imageContainer:{
flex:4,
backgroundColor:'#2196F3'
},
navContainer:{
flex:6,
backgroundColor:'#E0E0E0',
paddingTop:20,
paddingBottom:20,
paddingLeft:15,
paddingRight:15,
},
balanceContainer:{
flex:2,
backgroundColor:'#424242',
flexDirection:'row'
},
});
but I am getting some overlapped flex View. i am using react navigation for the landing screen
My result screen I am attaching.
What wrong I am doing??
最佳答案
将 flex:1 添加到 navContainer 的三个内部 View 。
<View style={{width: '100%', height: 90, flex:1, flexDirection:'row',marginBottom:15}}>
<View style={{flex:2,backgroundColor:"#388E3C"}}></View>
<View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
</View>
<View style={{width: '100%', height: 90, flex:1, flexDirection:'row',marginBottom:15}}>
<View style={{flex:2,backgroundColor:"#FFAB00"}}></View>
<View style={{flex:5,backgroundColor:"#FFD740"}}></View>
</View>
关于javascript - Flex View 在 React Native 中重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52489727/