如何在React Native中包装组件时传递导航道具

Question

升级到createMaterialTopTabNavigator后，无法导航到另一个页面 这是我测试过的代码

class TabScreen extends Component {
  render () {
    const { navigate } = this.props.navigation;
    return (
      <TouchableOpacity onPress={() =>  this.props.navigation.navigate("secondPage")}  style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>{this.props.title}</Text></TouchableOpacity>
    );
  }
}

class TopTab1 extends Component {
  render () {
    return (<TabScreen title="Top tab1" navigation={this.props.navigation} />);
  }
}
class TopTab2 extends Component {
  render () {
    return (<TabScreen title="Top tab2" navigation={this.props.navigation} />);
  }
}

const TopTabs = createMaterialTopTabNavigator(
  {
    'tab1': TopTab1,
    'tab2': TopTab2,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'tab1') {
          iconName = `ios-home${focused ? '' : '-outline'}`;
        } else if (routeName === 'tab2') {
          iconName = `ios-refresh-circle${focused ? '' : '-outline'}`;
        }
        return <Icon name={iconName} size={25} color={tintColor} />;
      },
    }),
    initialRouteName: 'Home',
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,

  }
);
export default class App extends Component {
render() {
return (
  <View style={styles.container}>
    <TopTabs navigation={ this.props.navigation } />
  </View>
);
}
}

在单击时不执行任何操作，没有导航，没有错误。仅touchableopacity动画表演。我发现传递导航道具时出错。