Reagiere native NavigationBar Position

Question

Ich spiele ein wenig mit Navigator in React Native. Leider erscheint eine Navigationsleiste am unteren Bildschirmrand. Können Sie mir bitte sagen, wie Sie die Navigationsleiste an den oberen Bildschirmrand bringen? Unten ist mein Code:

var React = require('react-native'); 
var { 
    View, 
    Text, 
    StyleSheet, 
    Navigator 
} = React; 

var Signin = require('./components/authentication/signin'); 
var Signup = require('./components/authentication/signup'); 
var Groceries = require('./components/groceries/groceries.js'); 
var AddMeal = require('./components/groceries/addMeal.js'); 

var BaseConfig = Navigator.SceneConfigs.FloatFromRight; 
var CustomSceneConfig = Object.assign({}, BaseConfig, { 
    springTension: 200, 
    springFriction: 1, 
}); 
var ROUTES = { 
    signin: Signin, 
    signup: Signup, 
    groceries: Groceries, 
    addmeal: AddMeal, 
}; 

module.exports = React.createClass({ 
    renderScene: function (route, navigator) { 
    var Component = ROUTES[route.name]; 
    return <Component route={route} navigator={navigator} />; 
    }, 

    _configureScene: function (route) { 
    return CustomSceneConfig; 
    }, 

    render: function() { 
    return (
     <Navigator 
      style={styles.container} 
      initialRoute={{name: 'groceries'}} 
      renderScene={this.renderScene} 
      configureScene={this._configureScene} 
      navigationBar={ 
      <View style={styles.navbar}> 
       <Text style={styles.backButton}>Back</Text> 
      </View>} 
     /> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    navbar: { 
    alignItems: 'center', 
    backgroundColor: '#fff', 
    borderBottomColor: '#eee', 
    borderColor: 'transparent', 
    borderWidth: 1, 
    justifyContent: 'center', 
    height: 44, 
    flexDirection: 'row' 
    }, 
}); 

Grüße, Przemek

Answer 1

Ganz einfach Navigator injizieren nicht für die absolute Positionierung es sich in Ihrer benutzerdefinierten Komponente verwendet, so ist es einfach durch Flexbox angelegt.

Navigator.NavigationBar ‚s Standard-Styling ist die folgende (mit Hintergrund Transparenz-Regel):

position: 'absolute', 
top: 0, 
left: 0, 
right: 0, 

einfach ändern Sie Ihre navber Arten die oben enthalten:

navbar: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    alignItems: 'center', 
    backgroundColor: '#fff', 
    borderBottomColor: '#eee', 
    borderColor: 'transparent', 
    borderWidth: 1, 
    justifyContent: 'center', 
    height: 44, 
    flexDirection: 'row' 
}, [...] 

Answer 2

Danke Daniel, das funktioniert Aber es gibt immer noch ein kleines Problem. Diese Navigationsleiste überlagert die Szene mit der Höhe: 44. Soll ich marginTop: 44 für die äußerste Komponente jeder Szene einstellen? Oder gibt es eine Möglichkeit, es für jede Szene auf Navigator-Ebene zu setzen? Vielleicht in renderScene-Methode wie folgt:

renderScene: function (route, navigator) { 
    var Component = ROUTES[route.name]; 
    return (
     <View style={{marginTop: 44}}> 
     <Component route={route} navigator={navigator} /> 
     </View> 
    ); 
    }, 

Gibt es einen besseren Weg?

Answer 3

auf <Navigator> Komponente, fügen sceneStyle={{paddingTop: 44}} als eine der Stützen

Nach Ihrem Beispiel:

<Navigator 
    style={styles.container} 
    initialRoute={{name: 'groceries'}} 
    renderScene={this.renderScene} 
    configureScene={this._configureScene} 
    navigationBar={ 
    <View style={styles.navbar}> 
     <Text style={styles.backButton}>Back</Text> 
    </View>} 
    sceneStyle={{paddingTop: 44}} 
/>