如何在SwitchNavigator中使用挂钩

Question

我正在尝试将https://github.com/expo/react-native-action-sheet与开关导航器一起使用。

我不确定如何进行基本设置，因为自述文件中的示例与我的App.js不同。我正在使用react 16.8，所以我应该可以使用钩子。

My App.js

import { useActionSheet } from '@expo/react-native-action-sheet'
const AuthStack = createStackNavigator(
    { Signup: SignupScreen, Login: LoginScreen }
    );

const navigator = createBottomTabNavigator(
{
        Feed: {
            screen: FeedScreen,
            navigationOptions: {
                tabBarIcon: tabBarIcon('home'),
            },
        },
        Profile: {
            screen: ProfileScreen,
            navigationOptions: {
                tabBarIcon: tabBarIcon('home'),
            },
        },
    },

    );

const stackNavigator = createStackNavigator(
{
    Main: {
        screen: navigator,
            // Set the title for our app when the tab bar screen is present
            navigationOptions: { title: 'Test' },
        },

        // This screen will not have a tab bar
        NewPost: NewPostScreen,
    },
    {
        cardStyle: { backgroundColor: 'white' },
    },
    );

export default createAppContainer(
    createSwitchNavigator(
        {
            AuthLoading: AuthLoadingScreen,
            App: stackNavigator,
            Auth: AuthStack,
        },
        {
            initialRouteName: 'AuthLoading',
        }
    );

    const { showActionSheetWithOptions } = useActionSheet();
);

更新，在我的组件内调用showActionSheetWithOptions时出现此错误：

  

只能在函数组件的主体内部调用挂钩。无效的挂接调用

这是我的代码：

import React, { Component } from 'react';
import { useActionSheet } from '@expo/react-native-action-sheet'
export default class NewPostScreen extends Component {

    _onOpenActionSheet = () => {
        const options = ['Delete', 'Save', 'Cancel'];
        const destructiveButtonIndex = 0;
        const cancelButtonIndex = 2;
        const { showActionSheetWithOptions } = useActionSheet();
        showActionSheetWithOptions(
        {
            options,
            cancelButtonIndex,
            destructiveButtonIndex,
        },
        buttonIndex => {
            console.log(buttonIndex);
        },
        );
    };

    render () {
        return (
                <View>
                    <Button title="Test" onPress={this._onOpenActionSheet} />
                </View>
         )
    }
}

更新2

我也尝试使用功能组件，但是操作表无法打开（控制台确实会打印“按下”）

// ActionSheet.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { useActionSheet } from '@expo/react-native-action-sheet'

export default function ActionSheet () {
    const { showActionSheetWithOptions } = useActionSheet();
    const _onOpenActionSheet = () => {
        console.log("pressed");
        const options = ['Delete', 'Save', 'Cancel'];
        const destructiveButtonIndex = 0;
        const cancelButtonIndex = 2;
        showActionSheetWithOptions(
            {
              options,
              cancelButtonIndex,
              destructiveButtonIndex,
            },
            (buttonIndex) => {
                console.log(buttonIndex);
            },
        );
    };

    return (
        <TouchableOpacity onPress={_onOpenActionSheet} style={{height: 100,}}>
            <Text>Click here</Text>
        </TouchableOpacity>
    );
};

Answer 1

问题

您会看到here。您没有连接应用程序根组件。

解决方案

从connectActionSheet导入@expo/react-native-action-sheet并将应用程序根组件连接到操作表。 只需修改您的App.js即可反映以下内容：

// ... Other imports
import { connectActionSheet } from '@expo/react-native-action-sheet'

const AuthStack = createStackNavigator({
    Signup: SignupScreen,
    Login: LoginScreen
});

const navigator = createBottomTabNavigator({
    Feed: {
        screen: FeedScreen,
        navigationOptions: {
            tabBarIcon: tabBarIcon('home'),
        },
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: {
            tabBarIcon: tabBarIcon('home'),
        },
    },
});

const stackNavigator = createStackNavigator({
    Main: {
        screen: navigator,
        // Set the title for our app when the tab bar screen is present
        navigationOptions: { title: 'Test' },
    },

    // This screen will not have a tab bar
    NewPost: NewPostScreen,
}, {
    cardStyle: { backgroundColor: 'white' },
});

const appContianer = createAppContainer(
    createSwitchNavigator({
        AuthLoading: AuthLoadingScreen,
        App: stackNavigator,
        Auth: AuthStack,
    }, {
        initialRouteName: 'AuthLoading',
    })
);

const ConnectApp = connectActionSheet(appContianer);

export default ConnectApp;

现在，在任何应用程序屏幕（Feed，个人资料，主屏幕等）上，您都可以按以下方式访问操作表：

如果是无状态组件

// ... Other imports
import { useActionSheet } from '@expo/react-native-action-sheet'

export default function Profile () {
  const { showActionSheetWithOptions } = useActionSheet();
  /* ... */
}

如果是Statefull组件

// ... Other imports
import React from 'react'
import { useActionSheet } from '@expo/react-native-action-sheet'

export default Profile extends React.Component {
  const { showActionSheetWithOptions } = useActionSheet();
  /* ... */
}

注意：您也可以按照以下说明从docs

访问操作表

  

App组件可以访问this.props.showActionSheetWithOptions的actionSheet方法