react-native
Navigator bästa metoder

Navigatör

Navigator är React Natives standardnavigator. En Navigator komponent hanterar en bunt med ruttobjekt och tillhandahåller metoder för att hantera den bunten.

<Navigator
  ref={(navigator) => { this.navigator = navigator }}
  initialRoute={{ id: 'route1', title: 'Route 1' }}
  renderScene={this.renderScene.bind(this)}
  configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
  style={{ flex: 1 }}
  navigationBar={
    // see "Managing the Navigation Bar" below
    <Navigator.NavigationBar routeMapper={this.routeMapper} /> 
  }
/>

Hantera ruttstacken

initialRoute märke till initialRoute . En rutt är helt enkelt ett javascriptobjekt och kan ta vilken form du vill och ha vad du vill. Det är det primära sättet att du skickar värden och metoder mellan komponenter i din navigationsstack.

Navigator vet vad som ska göras baserat på värdet som returnerats från sin renderScene .

renderScene(route, navigator) {
  if (route.id === 'route1') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  } else if (route.id === 'route2') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  }
}

Låt oss föreställa oss en implementering av ExampleScene i detta exempel:

function ExampleScene(props) {

  function forward() {
    // this route object will passed along to our `renderScene` function we defined above.
    props.navigator.push({ id: 'route2', title: 'Route 2' });
  }

  function back() {
    // `pop` simply pops one route object off the `Navigator`'s stack
    props.navigator.pop();
  }

  return (
    <View>
      <Text>{props.title}</Text>
      <TouchableOpacity onPress={forward}>
        <Text>Go forward!</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={back}>
        <Text>Go Back!</Text>
      </TouchableOpacity>
    </View>
  );
}

Konfigurera Navigator

Du kan konfigurera Navigator övergångar med configureScene prop. Detta är en funktion som är passerat route objektet och måste returnera en konfigurationsobjekt. Dessa är de tillgängliga konfigurationsobjekten:

• Navigator.SceneConfigs.PushFromRight (standard)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

Du kan returnera ett av dessa objekt utan ändring, eller du kan ändra konfigurationsobjektet för att anpassa navigeringsövergångarna. Till exempel, för att ändra kantbredden för att närmare kunna emulera iOS UINavigationController interactivePopGestureRecognizer :

configureScene={(route) => {
  return {
    ...Navigator.SceneConfigs.FloatFromRight,
    gestures: {
      pop: {
        ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
        edgeHitWidth: Dimensions.get('window').width / 2,
      },
    },
  };
}}

Hantera NavigationBar

Navigator komponenten har en navigationBar prop, som teoretiskt kan ta alla korrekt konfigurerade React-komponenter. Men den vanligaste implementeringen använder standard Navigator.NavigationBar . Detta tar en routeMapper prop som du kan använda för att konfigurera utseendet på navigeringsfältet baserat på rutten.

En routeMapper är ett vanligt javascriptobjekt med tre funktioner: Title , RightButton och LeftButton . Till exempel:

const routeMapper = {

  LeftButton(route, navigator, index, navState) {
    if (index === 0) {
      return null;
    }

    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}
      >
        <Text>Back</Text>
      </TouchableOpacity>
    );
  },

  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={route.handleRightButtonClick}
        style={styles.navBarRightButton}
      >
        <Text>Next</Text>
      </TouchableOpacity>
   );
  },

  Title(route, navigator, index, navState) {
    return (
      <Text>
        {route.title}
      </Text>
    );
  },
};

Se mer

För mer detaljerad dokumentation av varje rekvisita, se den officiella React Native Documentation for Navigator och React Native guide om hur du använder Navigators .

Använd reanavigering för navigering i reaktiva inbyggda appar

Med hjälp av reanavigering kan du lägga till navigering till din app riktigt enkelt.

Installera rea-navigering

npm install --save react-navigation

Exempel:

import { Button, View, Text, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

const App = StackNavigator({
  FirstPage: {screen: FirstPage},
  SecondPage: {screen: SecondPage},
});

class FirstPage extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;

    return (
      <Button
        title='Go to Second Page'
        onPress={() =>
          navigate('SecondPage', { name: 'Awesomepankaj' })
        }
      />
    );
  }
}

class SecondPage extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });

  render() {
    const { goBack } = this.props.navigation;
    return (
      <View>
        <Text>Welcome to Second Page</Text>
        <Button
          title="Go back to First Page"
          onPress={() => goBack()}
        />
      </View>
    );
  }
}

react-native Navigering med react-native-router-flux

Installera med hjälp av npm install --save react-native-router-flux

I reaktivt infödda-router-flöde kallas varje rutt en <Scene>

<Scene key="home" component={LogIn} title="Home" initial />

key En unik sträng som kan användas för att hänvisa till den specifika scenen.

component Vilken komponent att visa, här är det

title skapa en NavBar och ge den en titel 'Hem'

initial Är detta den första skärmen i appen

Exempel:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="login" component={LogIn} title="Login Form" initial />
      <Scene key="secondPage" component={SecondPage} title="Home" />
    </Router>
  );
};

export default RouterComponent;

Importera den här filen i huvudapp.js (indexfil) och återge den. För mer information kan du besöka den här länken .