tabBarOnPress 不工作 bottomTabNAvigator

Question

我在 5 月的 BottomTabNavigator 中有三个屏幕。我想在按下底部导航器中的第三个屏幕（范围）后立即为 ios/android 组件传递 React 本机日期选择器。我尝试在静态导航选项中的第三个屏幕中使用 tabBarOnPress，但它似乎不起作用。

这是我的代码片段：

App.js

    (all imports considered)
    .......////
    const RangeStack = createStackNavigator({
      Range: {
        screen : Range
      }
    })



    export const BottomTabNavigation = createBottomTabNavigator({
      Daily: {
        screen: DailyStack
      },
      Monthly: {
        screen: MonthlyStack
      },
      Range: {
        screen: RangeStack
      }
    })
...../////

Range.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

import AsyncStorage from '@react-native-community/async-storage';
import { TouchableOpacity } from 'react-native-gesture-handler';


export const SalesUiRange = () => {
  return (
    <View>
      <Text>Sales ui range</Text>
    </View>
  )
}


export class ClaimsUiRange extends React.Component {

  render () {    
    return (   
      <View>
      <Text>Claims ui range</Text>
    </View>
    )
  }
}




export default class Range extends Component {
  static navigationOptions = ({ navigation }) => {
    return {

      tabBarOnPress: ({navigation, defaultHandler }) => {
       alert('pressed')
        defaultHandler();
      }
    }
  }


  constructor(props) {
    super(props)

    this.state = {
       valueOption: ''
    }
  }

     async getItem (item){
      const valueOption = await AsyncStorage.getItem(item);
      this.setState({
        valueOption
      })
}



  componentDidMount(){

    this.getItem('InitialOption');

  }


  render() {
    return (
      <View>
        {this.state.valueOption === 'sales' ? <SalesUiRange/> : <ClaimsUiRange/>}
      </View>
    )
  }
}

请帮助完成这项工作。

Answer 1

这不起作用，因为您正在向 stackNavigator 提供 tabBarOnPress 属性。

要将其提供给您需要的路线，您必须将 createBottomTabNavigator 更改为：

Range: {
    screen: RangeStack
    navigationOptions:{
       tabBarOnPress:({navigation, defaultHandler}) => {
               //whatever you need to do
            defaultHandler()
        }
     }
  }

Answer 2

@Auticcat 是对的，但我要补充一点，如果您真的想将导航选项保留在组件内，可以在导航器中使用 getActiveChildNavigationOptions。

export const BottomTabNavigation = createBottomTabNavigator({
  Daily: {
    screen: DailyStack,
  },
  Monthly: {
    screen: MonthlyStack,
  },
  Range: {
    screen: RangeStack,
    navigationOptions: ({ navigation, screenProps }) => ({
      ...getActiveChildNavigationOptions(navigation, screenProps),
    }),
  }
});

tabBarOnPress 不工作 bottomTabNAvigator

tabBarOnPress not working bottomTabNAvigator

react-native

onpress