Question

我很难在导航栏下方的初始视图中找出需要更改的道具。或者我需要更改导航栏的支柱？基本上，导航栏隐藏了底层视图的顶部。我在这里附上一个屏幕上限：

这是我的代码。

导航器代码：

var routeMapper = {
  LeftButton: function(route, navigator, index, navState) {
    if(index > 0) {
      return (
        <TouchableHighlight
          underlayColor="transparent"
          onPress={() => { if (index > 0) { navigator.pop() } }}>
          <Text style={ styles.leftNavButtonText }>Back</Text>
        </TouchableHighlight>)
    }
    else { return null }
  },
  RightButton: function(route, navigator, index, navState) {
    return null;
  },
  Title: function(route, navigator, index, navState) {
    return <Text style={ styles.navbarTitle }>EST4Life</Text>
  }
};

module.exports = React.createClass({


  renderScene: function(route, navigator) {
    var Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
    // return the component with props to the current route and the navigator instance
    return <Component route={route} navigator={navigator} />;
  },

  render: function() {
    // return an instance of Navigator
    return (
      <Navigator

        style={styles.container}
        initialRoute={{name: 'signin'}}
        renderScene={this.renderScene}
        configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }}
        navigationBar={<Navigator.NavigationBar
          routeMapper={routeMapper}
          style={styles.navBarStyle}
        />}
      />
    )
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  navBarStyle: {
    backgroundColor: 'gray',
    flex: 1,
    borderWidth: 1
  },
  navbarTitle: {
    color: 'white',
  },
  rightNavButtonText: {
    color: 'white',
  },
  leftNavButtonText: {
    color: 'white',
  },
})

signin.js

module.exports = React.createClass({

  render: function() {
    if (this.state.user == '') { // this.state.user = '' when signin is initiated
      return <View style={styles.container}><Text>Loading...</Text></View>
    } else if (this.state.user == null){ // this.state.user == null when user is not logged in
      return (
        <View style={styles.container}>

            <Text>Sign In</Text>

            <Text style={styles.label}>Username:</Text>
            <TextInput
            style={styles.input}
            value={this.state.username}
            onChangeText={(text) => this.setState({username: text})}
            />

            <Text style={styles.label}>Password:</Text>
            <TextInput
            secureTextEntry={true}
            style={styles.input}
            value={this.state.password}
            onChangeText={(text) => this.setState({password: text})}
            />

            <Text style={styles.label}>{this.state.errorMessage}</Text>
            <Button text={'Sign In'} onPress={this.onLoginPress} />
            <Button text={'I need an account..'} onPress={this.onSignupPress} />

        </View>
      ); // onPress={this.onPress} - pass in the onPress method below to TouchableHighlight
    } else { // clear view when user is logged in
      return <View><Text></Text></View>
    }

  }, // end of render



var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: 'green'
  },
  input: {
    padding: 5, // space between text and inside of box
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    width: 200,
    alignSelf: 'center',
  },
  label: {
    fontSize: 18
  }
});

感谢。

更新：我想出了如何提取导航栏所涉及的高度。创建组件的使用代码：

var NavBarHeight = navigator.props.navigationBar.props.navigationStyles.General.NavBarHeight
var StatusBarHeight = navigator.props.navigationBar.props.navigationStyles.General.StatusBarHeight
var TotalNavHeight = navigator.props.navigationBar.props.navigationStyles.General.TotalNavHeight

此后在任何场景中使用的代码：

var NavBarHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.NavBarHeight
var StatusBarHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.StatusBarHeight
var TotalNavHeight = this.props.navigator.props.navigationBar.props.navigationStyles.General.TotalNavHeight

Answer 1

Give your signin.js container some marginTop. That will get it done.

Answer 2

您可以尝试将sceneStyle用于导航器吗？这适用于使用此导航器渲染的每个场景。因此，您可以尝试类似{marginTop：55}的内容，并根据导航栏的高度从那里进行调整。

https://facebook.github.io/react-native/docs/navigator.html#scenestyle

react-native Navigator（navbar）隐藏Navbar下的View

2 个答案: