web-dev-qa-db-fra.com

Exemple de navigation entre les vues dans React Native Android?

Après avoir vérifié la React native, je n’ai toujours pas compris le meilleur moyen de créer des vues et de naviguer entre différents composants.

Je ne souhaite utiliser aucun composant externe tel que:

https://github.com/Kureev/react-native-navbar/

https://github.com/23c/react-native-transparent-bar

https://github.com/superdami/react-native-custom-navigation

Je n'ai pas besoin d'une barre de navigation, je veux juste définir des vues et faire glisser à gauche, à droite ou à droite une vue, rien de plus.

Je sais que quelque chose de fondamental, mais je ne trouve aucun exemple utile.

S'il vous plaît, n'importe qui peut m'aider? Un exemple fonctionnel dans https://rnplay.org/ ?

Merci.

javascriptreact-native
31
Eusthace

UPDATE 04/2018:

Les choses ont changé depuis ma première réponse, et aujourd'hui deux bibliothèques volumineuses sont pertinentes pour la navigation: la navigation par réaction et la navigation par réaction en natif.

J'écrirai un exemple de réaction-navigation, une bibliothèque facile à utiliser et à gérer complètement par des personnes sérieuses de la communauté.

Installez d'abord la bibliothèque:

yarn add react-navigation

ou

npm install --save react-navigation

Ensuite, dans le point d'entrée de votre application (index.js):

import Config from './config';

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);

Vous pouvez voir que nous passons un objet dans StackNavigator, il s’agit de la configuration de nos écrans. Voici un exemple de configuration:

import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";

const Config = {
      navigation: {
          Home: {
            screen: HomeScreen
          },
          Settings: {
            screen: SettingsScreen,
          }
       }
    }

Maintenant, l'application connaît chaque écran que nous avons. Nous pouvons simplement indiquer à la fonction de "navigation" d’accéder à notre écran de réglage. Regardons notre écran d'accueil:

class HomeScene extends Component {

      constructor(props) {
          super(props);
      }

      render () {
        return (
        <View>
            <Button
              title="Go to Settings"
              onPress={() => this.props.navigation.navigate('Settings')}
            />
        </View>

        );
      }
    }

Comme vous pouvez le constater, la navigation va hydrater les accessoires. Et à partir de là, vous pouvez faire ce que vous voulez.

Allez dans la documentation de la bibliothèque pour voir tout ce que vous pouvez faire: changer le type d’en-tête, le titre, le type de navigation, ...

RÉPONSE PRÉCÉDENTE:

Regardez cet exemple: https://github.com/h87kg/NavigatorDemo

C'est utile et c'est un exemple de navigateur bien écrit, meilleur que celui ci-dessus que vous venez d'écrire, je pense.

Regardez principalement la relation entre LoginPage.js et MainPage.js

29
rob-art

J'ai trouvé cet exemple: https://rnplay.org/apps/HPy6UA

Et j'ai écrit un tutoriel à ce sujet: https://playcode.org/navigation-in-react-native/

Il est très utile de comprendre la navigation dans React Native:

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
} = React;

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
  // Make it snap back really quickly after canceling pop
  snapVelocity: 8,
  // Make it so we can drag anywhere on the screen
  edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  // A very tighly wound spring will make this transition fast
  springTension: 100,
  springFriction: 1,
  // Use our custom gesture defined above
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.Push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;
13
Eusthace

Je vous suggère d'utiliser réaction-navigation vous pouvez jeter un coup d'œil au site de jeu Navigator exemple

Installez le module de navigation.

npm install --save react-navigation

Importez-le dans votre application

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

const BasicApp = TabNavigator({
  Main: {screen: MainScreen},
  Setup: {screen: SetupScreen},
});

... et naviguer

class MainScreen extends React.Component {
  static navigationOptions = {
    label: 'Home',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Setup Tab"
        onPress={() => navigate('Setup')}
      />
    );
  }
}
2
locropulenton