Question

我正在尝试消除徽标和手机顶部之间的空间，但是我的页面的顶部空白很大。我如何消除这个空间。我也设置了marginTop：0和paddingTop：0，但仍在顶部显示了空间。以下是导致问题的我的代码：

AndroidManifest

LogoWithDesc和手机的顶部之间有很大的空间。下面是完整的代码：

 <View style = { styles.MainContainer }>
           <View style={styles.toolbar}>
              <Image 
                   resizeMode='contain'
                   style={styles.toolbarTitle} 
                  source={require('./Resources/LogoWithDesc.jpg')} />
           </View>

下面是我的手机的屏幕截图。我只是将徽标更改为脸书图标，但是空间仍然存在。如您所见，facebook图标上方

以下是toolbarTitle，工具栏和Maincontainer的样式：

class MainActivity extends Component {

  constructor(){

    super();

    this.state={

      isVisible : true,

    }

  }

  Hide_Splash_Screen=()=>{

    this.setState({ 
      isVisible : false 

    });

  }

  componentDidMount(){

    var that = this;

    setTimeout(function(){

      that.Hide_Splash_Screen();

    }, 5000);



  }

  static navigationOptions = {
    title: 'Welcome',
  };



  OpenSecondActivityFunction = () =>
  {
     this.props.navigation.navigate('Mission');

  }

  OpenThirdActivityFunction = () =>
  {
     this.props.navigation.navigate('autoComp');

  }


  OpenSearchSer = () =>
  {
     this.props.navigation.navigate('SearchSer');

  }




  render()
  {
    let Splash_Screen = (

      <View style={styles.SplashScreen_RootView}>

          <View style={styles.SplashScreen_ChildView}>

              {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}

              <Image source={require('./Resources/tag.png')} 
              style={{width:'100%', height: '100%', resizeMode: 'contain'}} />

          </View>


          <TouchableOpacity 
            activeOpacity = { 0.5 }
            style={styles.TouchableOpacity_Style}
            onPress={this.Hide_Splash_Screen} >

              <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
              style={{width:25, height: 25}} />

          </TouchableOpacity>


      </View> )


     return(
        <View style = { styles.MainContainer }>
           <View style={styles.toolbar}>
              <Image 
                   resizeMode='contain'
                   style={styles.toolbarTitle} 
                  source={require('./Resources/LogoWithDesc.jpg')} />
           </View>
           <View>
            <Image 
             style={styles.title} 
          source={require('./Resources/pic1.png')} />
          </View>

          <View style={styles.searchButton}>
          <Button onPress = { this.OpenSecondActivityFunction } title = 'Mission'/>

         </View>
         <View style={styles.searchButton}>
           <Button onPress = { this.OpenThirdActivityFunction } title = 'Available Services'/>
         </View>

         {
            (this.state.isVisible === true) ? Splash_Screen : null
          }




        </View>


     );
  }
}



export default ActivityProject = StackNavigator(
{
  First: { screen: MainActivity, navigationOptions:{header:null} },

  Mission: { screen: MissionActivity },

  SearchSer: { screen: SearchServices,  navigationOptions:{header:null} },

  autoComp:{screen: AutoCompActivity,  navigationOptions:{header:null} }



});

const styles = StyleSheet.create(
{
  container:
  {
     justifyContent: 'center',
     flex:1,
     margin: 10

  },

  ActivityNameTextCss:
  {
     fontSize: 22,
     color: 'black',
     alignSelf:'center'
  },
  toolbar:{
    flexDirection:'row' ,
    marginTop:0,
    marginTop:0,
    flex:0


},
MainContainer:
{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

},

toolbarButton:{
   width: 50,            //Step 2
   color:'#fff',
   alignSelf:'center'

},
title:{
  justifyContent: 'center',
  alignItems: 'center',
  width:120,
  height:150,
  alignSelf:'center'

  },
  toolbarTitle:{
    width: 10,
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    flex:1 ,
    paddingTop: 0  ,
    marginTop:0   ,
    marginTop:0  ,
    flex:1        //Step 3
  },

  buttonShape:{

      margin: 40,
      width:160,
      marginLeft: 80,
      backgroundColor:'#00BCD4',


  },

  buttonAuto:{
    width:160,
    marginLeft: 80,
    marginTop:2,
    backgroundColor:'#00BCD4',
  },
  SubmitButtonStyle: {

    marginTop:10,
    paddingTop:15,
    paddingBottom:15,
    marginLeft:30,
    marginRight:30,
    backgroundColor:'#00BCD4',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },

  TextStyle:{
    color:'#fff',
    alignSelf:'center'
},
autocompleteContainer: {
  flex: 1,
  left: 0,
  position: 'absolute',
  right: 0,
  marginTop:40,
  zIndex: 1
},

searchButton:{
  width:300,
  marginLeft: 20,
  marginTop:20,
  backgroundColor:'#00BCD4',
},
SplashScreen_RootView:
{
    justifyContent: 'center',
    flex:1,
    margin: 10,
    position: 'absolute',
    width: '100%',
    height: '100%',

},

SplashScreen_ChildView:
{
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00BCD4',
    flex:1,
    margin: 20,
},

TouchableOpacity_Style:{

    width:25, 
    height: 25, 
    top:9, 
    right:9, 
    position: 'absolute'

},


});

任何帮助将不胜感激。

Answer 1

您的MainContainer样式正在使用flex在两个轴上将内容设置为center。如果您将alignItems更改为flex-start，应该可以解决您的问题。

Flex Cheatsheet是Flexbox的巨大帮助。 Yoga Layout对于React Native来说有点不同，但是在很多情况下应该会有所帮助。

请注意，将justifyContent更改为flex-start的问题已解决，因为它们的轴在Toolbar中与flexDirection: row交换了。

如何减少facebook图标上方的巨额利润

1 个答案: