Question

我只是从反应导航4迁移到5。我使用的是v4

this.props.navigation.setParams({
      scrollToTop: this._scrollToTop,
    });

在屏幕内部，并在我的自定义MyTabBar内部调用函数，如下所示：

onPress={() => {
              navigation.navigate("HomeStack");
              const navigationInRoute = state.routes[0].routes[0];
              navigationInRoute.params.scrollToTop();
}}

现在使用v5时，我必须使用setOption，如文档所示：

this.props.navigation.setOptions({
      scrollToTop: this._scrollToTop,
    });

问题是我不知道如何在标签栏内调用该函数。这是我的标签栏：

function MyTabBar({ state, descriptors, navigation }) {
  <View style={styles.FooterContenitor}>
          <TouchableHighlight>...          </TouchableHighlight>
          <TouchableHighlight>...          </TouchableHighlight>
          <TouchableHighlight 
            onPress={() => {
                  navigation.navigate("HomeStack");
                  ....how to call scrollToTop???....
            }}>...          
         </TouchableHighlight>
  </View>
}

有帮助吗？谢谢

####更新#########################

这是我的结构：

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <Tab.Navigator
        tabBar={props => <MyTabBar {...props} />}
        mode='modal'
        tabBarPosition="bottom"
        swipeEnabled={false}
        lazy={true}
        initialRouteName='HomeStack'//'HomeStack'
      >
        <Tab.Screen name="HomeStack" component={HomeStack}/>
        ...
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

尝试：

this.props.navigation.navigate();

如果要调用组件并使用组件内部的导航，则必须将导航道具传递给该组件。喜欢

<Component navigation={this.props.navigation} />

然后在组件内部使用this.props.navigation.navigate();

Answer 2

我在组件内部解决了这个问题

this.props.navigation.dangerouslyGetParent().setOptions({
  scrollToTop: this._scrollToTop,
});

并调用函数：

onPress={() => {
    navigation.navigate("HomeStack"); 
    const indexTab = state.routes[state.index].state ? state.routes[state.index].state.index : null      
    if(state.index===0 && (indexTab===0 || !indexTab)){
        const key = state.routes[state.index].key
        descriptors[key].options.scrollToTop()
    }

}}

单击标签栏按钮如何调用屏幕功能。反应导航v5，setOption。反应本机

2 个答案: