Question

我的BottomTabNavigator中有三个屏幕。我想在底部导航器中的第三个屏幕（Range）被按下时立即通过针对iOS / android组件的React native Date Picker。我尝试在静态导航选项的第三个屏幕中使用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

2 个答案: