React native wurde leerer Bildschirm

Question

Ich bin neu zu reagieren native, und ich versuche, einen Navigator verwenden, um zwischen verschiedenen Szenen wechseln. Allerdings, wenn der Simulator läuft, anstatt einen Fehler zu drucken, habe ich nur einen leeren, leeren, weißen Bildschirm, der nichts anzeigt, erwarten die verbleibende Batterie, die Zeit und das WiFi-Signal. Ich habe meinen Code viele Male überprüft und kann keinen Fehler finden. Kann mir jemand dabei helfen?

Das ist meine index.ios.js Datei:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Navigator 
} from 'react-native'; 

import Chatroom from './Views/Chatroom'; 
import Chat from './Views/Chat'; 

class goals extends Component{ 
    render(){ 
    return(
     <Navigator 
     initialRoute={{screen: 'Chatroom'}} 
    renderScene={(route, nav) => {return this.renderScene(route.screen)}} 
    /> 
) 
    } 

    renderScene(route,nav) { 
switch (route.screen) { 
    case 'Chatroom': 
    return <Chatroom navigator={nav} /> 
    case 'Chat': 
    return <Chat navigator={nav} /> 
     } 
    } 
} 

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

Das ist meine Chat.js Datei:

import React, { Component } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Chat extends Component { 
    render() { 
    return (
     <View> 
     <Text>This is chat</Text> 
     <TouchableHighlight onPress={this.gochatroom.bind(this)}> 
      <Text>Go to chatroom</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 


    gochatroom() { 
    this.props.navigator.push({ screen: 'Chatroom' }); 
    } 
} 

Das ist meine Chatroom.js Datei:

import React, { Component } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Chatroom extends Component { 
    render() { 
    return (
     <View> 
     <Text>This is chatroom</Text> 
     <TouchableHighlight onPress={this.gochat.bind(this)}> 
      <Text>Go to chat</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 


    gochat() { 
    this.props.navigator.push({ screen: 'Chat' }); 
    } 
} 

Answer 1

Sie übergeben die richtigen Argumente nicht an renderScene. Folgendes sollte besser funktionieren:

renderScene={(route, nav) => this.renderScene(route, nav)}