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

尝试在与导航器相同的文件中声明openGallery函数，并将AddImage部分更改为此：

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

Answer 2

为什么不让用户移动到下一个屏幕，而在该屏幕上，则在构造函数上设置了功能选择器。因此，这意味着当用户单击选项卡AddImage时它将自动加载函数选择器。

当用户成功添加图像或取消选择图像时，您可以将导航添加回主页。否则，如果要将图像的URL发送回首页，则只需使用params。

这种方法更容易。

例如在“添加图像”屏幕上：

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

当单击导航上的添加按钮时，此用户界面对于用户原因很有意义，它将突出显示该按钮。

react-navigation：按下Tab时如何运行我的功能？

2 个答案: