Question

我是React Native的新手。我有一个要连接的屏幕。

此屏幕的代码位于该屏幕的下方

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

我的StyleSheet是：

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

但是我得到了一些重叠的flex View。我正在使用反应   登陆屏幕导航

我要附加的结果屏幕。

我在做什么错？？

Answer 1

在navContainer的三个内部视图中添加flex：1。

<View style={styles.navContainer}>
              <View style={{width: '100%', height: 90, flex:1, 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, 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>
            </View>

Answer 2

解决方案可能在那里有效，但进一步的开发将阻碍工作。我已经完全修改了代码，并针对移动视图和滚动进行了优化。

希望你会喜欢这个界面。

import * as React from 'react';
import {
  StyleSheet,



View,
  Text,
  ImageBackground,
  ScrollView,
} from 'react-native';

export default class Prabhuji extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <ImageBackground
            source={{
              uri:
                'https://wallpaperbrowse.com/media/images/4643298-images.jpg',
            }}style={{width:"100%", height:"100%", marginTop:50}}>
            <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>
        <ScrollView style={styles.navContainer}>
          <View
            style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#E91E63' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#EC407A' }}></View>
          </View>
          <View
            style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#388E3C' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#66BB6A' }}></View>
          </View>
          <View style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#FFAB00' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#FFD740' }}></View>
          </View>
          <View style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#388E3C' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#66BB6A' }}></View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#aff',
  },
  imageContainer: {
    flex: 0.3,
    backgroundColor: '#2196F3',
  },
  navContainer: {
    flex: 1,
    backgroundColor: '#E0E0E0',    
  },
  contentBars: {
    // width: '100%',
    height: 120,
    flexDirection: 'row',
    margin: 15,
  },
});

Flex View在React Native中重叠

2 个答案: