在React Native上导航到完全不同的屏幕

在我的React Native应用程序中，我最初加载的是SceneA，它仅显示文本“单击我”。当点击这个按钮时，我想加载一个完全不同的屏幕（SceneB），它具有完全不同的组件。在React Native上导航到完全不同的屏幕

我在网上找到的所有例子（如下面的例子）加载一个完全相同的组件，但不同的值的场景。在我的情况下，它是一个完全不同的布局。我如何导航到新的屏幕（SceneB）？

它基本上等同于Android上的新Activity，同时传递一些数据。任何指针将不胜感激。

index.android.js

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

import SceneA from './SceneA'; 

class ReactNativeTest extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{ title: 'My Initial Scene', index: 0 }} 
     renderScene={(route, navigator) => 
      <SceneA 
      title={route.title} 

      // Function to call when a new scene should be displayed 
      loadNewScene={() => {  
       const nextIndex = route.index + 1; 
       navigator.push({ 
       title: 'Scene B', 
       index: nextIndex, 
       }); 
      }} 
      /> 
     } 
     /> 
    ) 
    } 
} 

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

SceneA.js

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

export default class SceneA extends Component { 
    render() { 
    return (
     <View> 
     <Text>Scene A</Text> 

     <TouchableHighlight onPress={this.props.loadNewScene}> 
      <Text>Click Me</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

SceneA.propTypes = { 
    loadNewScene: PropTypes.func.isRequired, 
};

来源

2016-12-05 Arturo

您办理哪些组件应该在renderScene功能渲染，每个场景都会有这样route.title你可以根据它来决定渲染哪一个。

renderScene={(route, navigator) => 
    if (route.title === 'Scene A') { 
    return <SceneA navigator={navigator} /> 
    } 
    if (route.title === 'Scene B') { 
    return <SceneB navigator={navigator} /> 
    } 
}

你的组件你要去里面

然后有一个处理的导航功能：

navigateToSceneB =() => { 
    this.props.navigator.push({ 
    title: 'Scene B' 
    }) 
}

来源

2016-12-05 17:06:35

在React Native上导航到完全不同的屏幕

回答

相关问题