Esempio di navigazione tra le visualizzazioni in React Native Android?

Question

Dopo il check del Reagire documentazione nativa, io continuo a non capire il modo migliore per creare viste e navigare tra le diverse componenti.

Non voglio usare tutti i componenti esterni come:

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

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

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

Non ho bisogno di una barra di navigazione, voglio solo impostare viste e fai scorrere a sinistra, a destra o fai una panoramica, niente di più.

quello che so è qualcosa di fondamentale, ma non riesco a trovare alcun esempio utile.

Ti prego, qualcuno mi può aiutare? Qualsiasi esempio funzionale in https://rnplay.org/?

Grazie.

Answer 1

Guarda questo esempio: https://github.com/h87kg/NavigatorDemo

È utile e un esempio di Navigator ben scritto, meglio di quello sopra che hai appena scritto, credo.

Principalmente guardare il rapporto tra LoginPage.js e MainPage.js

Answer 2

ho trovato questo esempio: https://rnplay.org/apps/HPy6UA

e ho scritto un tutorial su di esso: https://playcode.org/navigation-in-react-native/

E 'davvero utile per capire la navigazione in 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 3

vi suggerisco di utilizzare react-navigation si può dare uno sguardo al navigatore Playground example

• Componenti costruito per iOS e Android
• Scegliere tra TabNavigator, DrawerNavigator e StackNavigator.
• implementare il CustomNavigator
• Sviluppare il proprio navigation views
• logica condividere tra le applicazioni mobili, applicazioni web con il rendering del server.
• Documentation è piuttosto diretto
• È redux integrato.
• E 'super facile!
• diventerà il navigatore ufficiale suggerita da reagire nativo!

Installa modulo di navigazione.

npm install --save react-navigation 

Importa nella vostra applicazione

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

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

... e navigare

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