einen anderen Bildschirm öffnen in reagieren-native

Question

Ich habe diesen Bildschirm in reagieren nativen jetzt

import React, { Component } from 'react'; 
    import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native'; 


    class LoginView extends Component { 

     render() { 
      return (
       <View style={styles.container}> 
        <Text style={styles.title}> 
         HYGEX 
        </Text> 
        <View> 
         <TextInput 
          placeholder="Username" 
          style={styles.formInput} 
          /> 
         <TextInput 
          placeholder="Password" 
          secureTextEntry={true} 
          style={styles.formInput1} 
          /> 

        <TouchableHighlight style={styles.button} 
        onPress={() => this.move()}> 
        <Text style={styles.buttonText}>Login</Text> 
        </TouchableHighlight> 

        </View> 
       </View> 
      ); 
     } 

     move() { 
     //what i can do here to go to Socrce screen ??? 
     } 
     } 

So etwas wie Login-Bildschirm, wenn ich auf in TouchableHighlight ich

diesem Bildschirm öffnen müssen

'use strict'; 
import React, { Component } from 'react'; 
import { AppRegistry, ListView, Text, View } from 'react-native'; 

class HygexListView extends Component { 

    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([ 
     'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' 
     ]) 
    }; 
    } 
    render() { 
    return (
     <View style={{flex: 1, paddingTop: 22}}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 
module.exports = HygexListView; 

I versucht, Move-Methode zu implementieren, aber ich scheiterte! Irgendeine Idee warum?

Hat reactive-native eine Methode, um den Bildschirm zu ändern, wenn Sie auf TouchableHighlight klicken?

Answer 1

Sie haben einen Navigator zu implementieren, was in etwa eine Komponente, die alle Sachen auf Bildschirmen und Kopfleiste mit Back-Button im Zusammenhang verwaltet und usw.

Wie Sie ein Anfänger sind, empfehle ich Ihnen auf die aussehen docs auf diesen Link:

https://facebook.github.io/react-native/docs/navigator.html

Sorry für die kurze Antwort, ich bin auf meinem Handy.

Viel Glück!

Answer 2

Sie müssen Navigator verwenden. Bitte lesen Sie die unten angegebene Dokumentation. und wenn Sie brauchen, dann werde ich Ihnen meinen Code teilen. Hier

ein Beispiel: NavigatorExample

Answer 3

Wie andere erwähnt, müssen Sie eine Instanz von Navigator verwenden zwischen den Bildschirmen zu wechseln. Vielleicht können Sie einen Blick auf die example apps im React Native Repo werfen. Ich finde auch this router package ganz einfach einzurichten, und es enthält auch eine Beispiel-App, die Sie als Ausgangspunkt verwenden können.

bearbeiten Als einfaches Beispiel unter Verwendung reagieren-native-Router-Fluss, können Sie die Example.js Datei im Example Verzeichnis bearbeiten wie folgt aussehen:

import React, { 
    Component, 
} from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 
import LoginView from './LoginView'; 
import HygexListView from './HygexListView'; 
import { 
    Scene, 
    Router, 
    Actions, 
} from 'react-native-router-flux'; 

const styles = StyleSheet.create({ 
    container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    tabBarStyle: { 
    backgroundColor: '#eee', 
    }, 
    tabBarSelectedItemStyle: { 
    backgroundColor: '#ddd', 
    }, 
}); 


// define this based on the styles/dimensions you use 
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => { 
    const style = { 
    flex: 1, 
    backgroundColor: '#fff', 
    shadowColor: null, 
    shadowOffset: null, 
    shadowOpacity: null, 
    shadowRadius: null, 
    }; 
    if (computedProps.isActive) { 
    style.marginTop = computedProps.hideNavBar ? 0 : 64; 
    style.marginBottom = computedProps.hideTabBar ? 0 : 50; 
    } 
    return style; 
}; 

class Example extends Component { 
    render() { 
    return (
     <Router getSceneStyle={getSceneStyle}> 
     <Scene key="login" component={LoginView} initial={true}/> 
     <Scene key="hygex" component={HygexListView } /> 
     </Router> 
    ); 
    } 
} 

export default Example; 

Dann in move Funktion Ihres Komponente Sie haben folgende Möglichkeiten:

move(){ 
    Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that. 

ich den Code nicht getestet haben, so könnte es einige Fehler/fehlende Importe/code, aber es sho Ähm, gib dir eine Vorstellung davon, was du zu tun hast. }