通过导航器传递状态

Question

我正在使用 React Native 核心 Navigator 组件，但在按下导航栏中的按钮时无法弄清楚如何在组件之间传递数据。这是我拥有的设置的一些示例代码。

const NavigationBarRouteMapper = {
  Title: (route, navigator) => {
    let title;
    switch (route.component.displayName) {
      case 'FirstScreen':
        title = 'First Screen';
        break;
    }

    return (
      <Text>
        {title}
      </Text>
    )
  },
  LeftButton: (route, navigator) => {
    let onButtonPress, buttonTitle;
    switch (route.component.displayName) {
      case 'SecondScreen':
        buttonTitle = 'Close';
        onButtonPress = () => navigator.pop();
        break;
    }

    return (
      <TouchableOpacity
        onPress={onButtonPress}>
        <Text>
          {buttonTitle}
        </Text>
      </TouchableOpacity>
    )
  },
  RightButton: (route, navigator) => {
    let onButtonPress, buttonTitle;
    switch (route.component.displayName) {
      case 'SecondScreen':
        buttonTitle = 'Save';
        onButtonPress = () => {}; // @TODO Call onButtonPress in SecondScreen component
        break;
    }

    return (
      <TouchableOpacity
        onPress={onButtonPress}>
        <Text>
          {buttonTitle}
        </Text>
      </TouchableOpacity>
    );
  }
};

const App = React.createClass({
  renderScene(route, navigator) {
    return <route.component navigator={navigator} {...route.props} />;
  },
  render() {
    return (
      <Navigator
        style={styles.appContainer}
        initialRoute={{component: SplashScreen}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
          />
        }
      />
    );
  }
});

const FirstScreen = React.createClass({
  onButtonPress() {
    this.props.navigator.push({component: SecondScreen});
  },
  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.onButtonPress}>
          <Text>
            Click Me
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
});

const SecondScreen = React.createClass({
  getInitialState() {
    return {
      input: ''
    }
  },
  onButtonPress() {
    if (this.state.input.length) {
      // Do something with this.state.input such as POST to remote API
      this.props.navigator.pop();
    }
  },
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          onChangeText={(input) => this.setState({input})}
          value={this.state.input}
        />
      </View>
    );
  }
});

您可以从 cmets 中看到，我有一个存储在 SecondScreen 状态中的值，当有人点击“保存”按钮时，我想要对它执行一些操作。有什么想法吗？

Answer 1

在您的 renderScene 函数中，在返回 'route.component' 时，您可以传递 props 并在组件中读取它们。