javascript - example - react native wikipedia

Ejemplo de navegación entre vistas en React Native Android?

Question

Después de revisar la documentación de React Native, todavía no entiendo la mejor manera de crear vistas y navegar entre diferentes componentes.

No quiero usar ningún componente externo como:

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

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

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

No necesito una barra de navegación, solo quiero configurar vistas y deslizar hacia la izquierda, hacia la derecha o abrir una vista, nada más.

Sé que es algo básico, pero no puedo encontrar ningún ejemplo útil.

Por favor, ¿alguien puede ayudarme? ¿Algún ejemplo funcional en https://rnplay.org/ ?

Gracias.

Answer 1

Encontré este ejemplo: https://rnplay.org/apps/HPy6UA

Y he escrito un tutorial al respecto: https://playcode.org/navigation-in-react-native/

Es realmente útil comprender la navegación en 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;

Answer 2

Te sugiero que uses react-navigation , puedes echar un vistazo al example Navigator Playground

• Componentes creados para iOS y Android
• Elija entre TabNavigator , DrawerNavigator y StackNavigator .
• Implemente su CustomNavigator
• Desarrolla tus propias vistas de navegación
• Comparte la lógica entre las aplicaciones móviles, las aplicaciones web con la representación del servidor.
• Documentation es bastante directa
• Está reducido integrado.
• ¡Es súper fácil!
• ¡Se convertirá en el navegador oficial sugerido por react-native!

Instale el módulo de navegación.

npm install --save react-navigation

Importarlo en tu aplicación

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

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

... y navega

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'')}
      />
    );
  }
}

Answer 3

ACTUALIZACIÓN 04/2018:

Las cosas han cambiado desde mi primera respuesta, y hoy dos bibliotecas masivas son relevantes para la navegación: reaccionar-navegar y reaccionar-nativo-navegación.

Escribiré un ejemplo para react-navigation, que es una biblioteca fácil de usar y con mantenimiento completo por personas serias de la comunidad.

Primero instala la biblioteca:

yarn add react-navigation

o

npm install --save react-navigation

Luego, en el punto de entrada de su aplicación (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);

Puede ver que pasamos un objeto al StackNavigator, es toda la configuración de nuestras pantallas, aquí hay un ejemplo de configuración:

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

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

Ahora la aplicación conoce cada pantalla que tenemos. Simplemente podemos decirle a la función "navegar" que vaya a nuestra pantalla de configuración. Veamos nuestra pantalla de inicio:

class HomeScene extends Component {

      constructor(props) {
          super(props);
      }

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

        );
      }
    }

Como puede ver, la navegación hidratará los accesorios. Y desde aquí puedes hacer lo que quieras.

Vaya a la documentación de la biblioteca para ver todo lo que puede hacer: cambiar el tipo de encabezado, el título, el tipo de navegación, ...

RESPUESTA ANTERIOR:

Mire este ejemplo: https://github.com/h87kg/NavigatorDemo

Es útil y un ejemplo de Navigator bien escrito, mejor que el anterior que acaba de escribir, creo.

Principalmente mire la relación entre LoginPage.js y MainPage.js