Question

我正在使用react-navigation：

    import React from 'react';
    import { TabNavigator, StackNavigator } from 'react-navigation';

    import Login from '../components/login/Login';
    import Activation from '../components/login/Activation';

    export const LoginStack = StackNavigator({
      Login: {
        screen: Login,
      },
      Activation: {
        screen: Activation,
      },
    });



    export const Root = StackNavigator({
      Login: {
        screen: LoginStack,
      },
    },{
      mode: 'modal',
      headerMode: 'none',
      initialRouteName: 'Login',
    }

    );

这是我的登录组件：

import React, { Component } from 'react';
import { Container, Header, Content, Footer, FooterTab, Button, Icon, StyleProvider,Input } from 'native-base';
import { ImageBackground,Image,StyleSheet ,Text,View} from 'react-native';
import {colorConstants} from '../../constants'

export default class Login extends Component {

  constructor(props) {
   super(props);
   this.state = {selectedTab:'home',searchString:'',howToEnter:''};
 }



  render() {
    return (
      <ImageBackground source={require('../../images/backgrounds/bg_login.png')} style={{flex:1,resizeMode: 'stretch',width: null, height: null}}>


      <View style={{
              flex: 1,
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}>





            <View style={{ marginTop:100,width:'90%',height:56, flexDirection: 'row', justifyContent: 'flex-end',backgroundColor:colorConstants.ONE_APP_COLOR}}>
              <Text style={{color:'#fff',margin:16}}>ورود از طریق شماره تلفن</Text>
              <View
                style={{marginLeft:10,marginRight:10,height:56,borderLeftWidth: 1,borderLeftColor: '#1293ed'}}
              />
              <Icon  style={{color:'#fff',fontSize:30,margin:12}} type="Feather" name="smartphone" />
            </View>


            <View style={{ marginTop:16,width:'90%',height:56, flexDirection: 'row', justifyContent: 'flex-end',backgroundColor:colorConstants.TWO_APP_COLOR }}>
              <Text style={{color:'#fff',margin:16}}>ورود با حساب کاربری گوگل</Text>
              <View
                style={{marginLeft:10,marginRight:10,height:48,borderLeftWidth: 1,borderLeftColor: '#e7686c'}}
              />
              <Icon  style={{color:'#fff',fontSize:30,margin:12}} type="FontAwesome" name="google" />
            </View>

            <View style={{ width:'90%',height:100, flexDirection: 'row', justifyContent: 'flex-end' }}>
              <Text style={{textAlign: 'center',fontSize: 18,color:'#fff',margin:12}}>شما با ایجاد حساب کاربری در اپلیکیشن پرسش، قوانین و شرایط استفاده را پذیرفته و موظف به پیروی از آن هاهستید.</Text>
            </View>


     </View>



      </ImageBackground>
    );
  }

}

const styles = StyleSheet.create({
  icons: {
    height: 20,
    width: 20,
    margin:16
  },
  searchSection: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(52, 52, 52, 0)',
},
  searchIcon: {
      padding: 10,
  },
  input: {
      flex: 1,
      paddingTop: 10,
      paddingRight: 10,
      paddingBottom: 10,
      paddingLeft: 0,
      backgroundColor: 'rgba(52, 52, 52, 0)',
      color: '#fff',
  },
});

但是屏幕上方有一个空白区域：

Answer 1

您可以选择在所有屏幕中隐藏导航区域。像这样更新您的代码。

export const Root = StackNavigator({
      Login: {
        screen: LoginStack,
      },
    },{
      mode: 'modal',
      navigationOptions: {
             header: null//Will hide header for all screens of current stack navigator, 
       },
      initialRouteName: 'Login',
    })

，如果您希望将其用于特定屏幕，请尝试

export const Root = StackNavigator({
      Login: {
        screen: LoginStack,
        navigationOptions: {
             header: null//Will hide header for LoginStack 
       }
      },
    },{
      mode: 'modal',
      initialRouteName: 'Login',
    })

标头空白和ImageBackground

1 个答案: