ios - 在动画场景之外控制 StackNavigator

Question

编辑:我了解我的问题和解决方案，所以我改写我的问题，然后给出答案。

一个普通的 StackNavigator 和带有导航的屏幕看起来像这样:

class ExampleScreen extends React.Component {
  render() {
    const { navigate, state } = this.props.navigation.navigate;
    const exampleTitle = state.params.title;

    return (
      <View>
        <Text>{exampleTitle}</Text>
        <Button
          title="Click"
          onPress={() => {
            navigate('Example', { exampleTitle: 'foo' })
          }}
        />
      </View>
    );
  }
}

const ExampleNavigator = StackNavigator({
  Example: { screen: ExampleScreen }
}, {
  initialRouteName: 'Example',
  initialRouteParams: { exampleTitle: 'bar' }
});

AppRegistry.registerComponent('Example', () => ExampleNavigator);

我想访问 ExampleScreen#render 之外的 navigation 对象，这样它就不是 CardStack 动画的一部分。

Answer 1

我通过添加另一个屏幕来呈现 ExampleNavigator 和在 ExampleNavigator 上设置 ref 属性。 navigation 对象和路由参数的访问方式略有不同，但我将在下面的注释中对整个代码进行解释。

class ExampleScreen extends React.Component {
  render() {
    const { state } = this.props.navigation.navigate;
    const exampleTitle = state.params.title;

    return (
      <View>
        <Text>{exampleTitle}</Text>
      </View>
    );
  }
}

const ExampleNavigator = StackNavigator({
  Example: { screen: ExampleScreen }
}, {
  initialRouteName: 'Example',
  initialRouteParams: { exampleTitle: 'bar' }
});

// my solution
class RootScreen extends React.Component {
  constructor(props) {
    super(props);
    // makes sure _onPress has the correct context when clicked
    this._onPress = this._onPress.bind(this);
  }
  render() {
    // flex: 1 is set to make the navigator visible. you wont see the navigator
    // without this.
    return (
      <View style={{flex: 1}}>
        <ExampleNavigator ref='nav' />
        <Button title='Click' onPress={this._onPress} />
      </View>
    );
  }

  _onPress() {
    // read navigate and state from _navigation
    const { navigate, state } = this.refs.nav._navigation;
    const { routes, index } = state;
    // read scene params through the route of the index passed in state
    const params = routes[index].params;
    const exampleTitle = params.exampleTitle + ' clicked';

    // use the navigate method as your normally would
    navigate('Example', {exampleTitle});
  }
}

AppRegistry.registerComponent('Example', () => RootScreen);