response-navigation: Как запустить мою функцию при нажатии клавиши Tab?

Question

Я бы хотел загрузить свою собственную функцию при нажатии на вкладку.Поэтому вместо загрузки экрана вкладки должна загружаться моя (проверенная и работающая) функция, которая позволяет выбирать изображение из галереи симулятора iOS.Эта вкладка «AddImage» находится между вкладками «Домой» и «Настройки».Мне не нужно переключаться на другие вкладки, просто нажав на значок вкладки «AddImage», запустите мою функцию openGallery ().

    import React, { Component } from 'react';
    import { Platform, Text, View, StyleSheet, Dimensions, TouchableOpacity, CameraRoll, Image } from 'react-native';
    import { Alert, Button } from 'react-native-elements';
    import ImagePicker from 'react-native-image-picker';
    import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
    import Icon from 'react-native-vector-icons/FontAwesome';
    import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';      



            //Empty AddImage Screen
            export class AddImage extends Component{

             constructor(props) {
               super(props);

             this.openGallery = this.openGallery.bind(this);
            }
               openGallery(){
                    //execute function.......
               }

           componentDidMount(){
           this.props.navigation.setParams({openGallery: this.openGallery.bind(this)})
   }
            }

            export default createBottomTabNavigator({

                 Home: { screen: Home, 
                  navigationOptions:{
                      tabBarLabel: 'Home',
                      tabBarIcon: ({tintColor})=>(<Icon name="home" color={tintColor} size={24}/>)
                  }
                },
            AddImage: { screen: () => null, 
              navigationOptions:{
               tabBarLabel: '',
               tabBarIcon: ({tintColor})=>(<Icon name="plus-square" color={tintColor} size={24}/>),
               tabBarOnPress: () => { this.openGallery() },
      }
    },

                Settings: { screen: Settings,
                  navigationOptions:{
                    tabBarLabel: 'Settings',
                    tabBarIcon: ({tintColor})=>(<Icon name="cog" color={tintColor} size={24}/>)
                  }  
                 },
            },

            {//other bottom tab configurations
              order: ['Home', 'AddVideo', 'Settings'],
              }
            });

Как мне этого добиться?Я пытаюсь использовать опцию навигации tabBarOnPress, которая принадлежит компоненту, но она не работает и не позволяет мне вызывать мою собственную определенную функцию.Или есть другой путь полностью?Спасибо

Answer 1

Почему вы не позволяете пользователю перейти к следующему экрану, и на этом экране вы устанавливаете функцию выбора в конструкторе.Таким образом, это означает, что он автоматически загрузит вашу функцию выбора, когда пользователь нажимает на вкладку AddImage.

И вы можете добавить навигацию обратно на домашнюю страницу, когда пользователь успешно добавит изображение или отменит выбор изображения.В противном случае, если вы хотите отправить URL-адрес изображения обратно на домашнюю страницу, просто используйте params.

Этот подход проще.

Например, на экране «Добавить изображение»:

constructor(props){
 super(props)
 this.openGallery()
}

И этот пользовательский интерфейс будет иметь смысл для пользователя при нажатии кнопки «Добавить» на панели навигации., она подсветит кнопку.

Answer 2

Попробуйте объявить функцию openGallery в том же файле, что и навигатор, и измените часть AddImage на:

AddImage: { screen: () => null, 
  navigationOptions:{
      tabBarLabel: '',
      tabBarIcon: ({tintColor})=>(<Icon name="plus-square" color={tintColor} size={24}/>),
      tabBarOnPress: () => { this.openGallery() },
  }
},