Question

在我的React Native应用程序上，我最初加载SceneA，它只显示一个文本“Click me”。单击此按钮时，我想加载一个完全不同的屏幕（SceneB），它具有完全不同的组件。

我在网上找到的所有示例（如下例所示）都会加载具有完全相同组件但值不同的场景。在我的情况下，它是一个完全不同的布局。如何导航到新屏幕（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,
};

Answer 1

你可以处理在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'
  })
}

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

1 个答案: