在 React Native + Redux 中使用 Navigator

Question

我是 React Native 的新手。 我有一个使用 Redux 框架的 React Native 应用程序。我正在使用 Navigator 组件来处理导航，但是 this.props.navigator 在组件中是未定义的。如何将“this.props.navigator”传递给组件？ 我找不到任何如何正确执行此操作的好示例，因此我正在寻求一些帮助和说明。

index.anroid.js

...
import App from './app/app';

AppRegistry.registerComponent('RnDemo', () => App);

app.js

...    
import App from './containers/app';

const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
const store = createStoreWithMiddleware(rootReducer);

const rootApp = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  )
}

export default rootApp;

containers/app.js

...
class App extends Component {

  renderScene(route, navigator) {
    let Component = route.component
    return (
      <Component navigator={navigator} route={route} />
    )
  }

  configureScene(route) {
    if (route.name && route.name === 'Home') {
      return Navigator.SceneConfigs.FadeAndroid
    } else {
      return Navigator.SceneConfigs.FloatFromBottomAndroid
    }
  }

  _selectPage(page) {
    if(page === 'detail') {
      this.props.navigator.push({
        component: Detail,
        name: 'Detail'
      }) // **this.props.navigator.push is not a function**
    }
  }
  render() {
    const { navigator } = this.props;
    console.log(navigator);  // **>>>>>> Undefined**
    return (
      <View style={styles.container}>
        <View style={styles.menu}>
          <TouchableOpacity onPress={() => this._selectPage('detail')}><View style={styles.menuItem}><Text>Detail</Text></View></TouchableOpacity>
        </View>
        <View style={styles.content}>
          <Navigator
            ref='navigator'
            style={styles.navigator}
            configureScene={this.configureScene}
            renderScene={this.renderScene}
            initialRoute={{
              component: Home,
              name: 'Main'
            }}
          />
        </View>
      </View>
    )
  }
}

Answer 1

renderScene(route, navigator) {
    let Component = route.component
    return (
        // <Component navigator={navigator} route={route} />
        <Component {...this.props} navigator={navigator} route={route} />
    )
}

试试看