react-native怎么创建两个class

Posted 2023-03-29

参考技术A npm 使用介绍

npm 是一个 Node.js 模块，安装 Node.js 会默认安装 npm，可以在终端中使用以下命令来查看 npm 的版本：
npm -v

升级 npm：
sudo npm install npm -g

安装模块(安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块)：
npm install

查看 npm 配置：
npm config list

设置代理：
//设置 http 代理
npm config set proxy
//设置 https 代理
npm config set https-proxy

上面介绍了一些 npm 基本命令，接下来就可以在本地创建一个模块啦。
首先打开终端中新建一个你想在此创建自定义模块的文件夹，然后在命令行中登录 npm。输入以下命令：
npm adduser

接下来会提示你输入用户名和密码还有邮箱，一一完成后就可以输入以下命令来查看当前 npm 用户了：
npm whoami

如果正确显示了刚才注册的用户名，说明登录成功了。然后就使用以下命令来创建 npm 模块：
npm init

执行上述命令后，会引导你创建一个package.json文件，包括名称、版本、作者这些信息等。

创建模块

这里要提一下，为什么要写一个自定义模块。因为 React Native 虽然实现了很多 Native 组件，并且提供了丰富的
API，但是有些原生库还是不支持的，而且有很多开源的组件和库是面向原生的，因此要想在 React Native
中使用这些组件和库就需要自己定义一个模块，这样也方便别人集成。接下来我们直接进入正题。写一个 React Native
中可以使用的自定义模块。在命令行中执行
react-native init AwesomeProject

如何使用 apollo-hooks 为 react-native 创建实用程序

【中文标题】如何使用 apollo-hooks 为 react-native 创建实用程序

【英文标题】：How to create utils with apollo-hooks for react-native

【发布时间】：2019-11-21 01:22:12

【问题描述】：

我正在 react-native/apollo-hooks/graphql 上使用两个令牌（accessToken、refreshToken）进行身份验证流程。并为 updateTokens 创建了 apollo-hook。这个钩子我需要在不同的组件中使用，因为每次用户想要做任何动作，比如发帖或评论时，我都需要调用 updateTokens apollo 钩子。因此我需要将 updateTokens 的所有逻辑放到一个单独的工具中，因为我不想重复自己并将相同的代码放在任何地方。但是当我用 apollo 钩子制作单独的 util 文件时，它不起作用。谁能解释一下我该怎么做！

import React from 'react'
import  View, Button, Text  from 'react-native'
import  useMutation  from 'react-apollo-hooks'
import gql from 'graphql-tag'
import * as Keychain from 'react-native-keychain'

const UPDATE_TOKENS = gql`
  mutation UpdateTokens($accessToken: String!, $refreshToken: String!) 
    updateTokens(data:  accessToken: $accessToken, refreshToken: $refreshToken ) 
      user 
        name
        phone
      
      accessToken
      refreshToken
    
  
`

const HomeScreen = ( navigation ) => 
  const update_tokens = useMutation(UPDATE_TOKENS)

  const updateTokens = (accessToken, refreshToken) => 
    console.log('accessToken', accessToken)
    console.log('refreshToken', refreshToken)
    update_tokens(
      variables:  accessToken, refreshToken ,
      update: async (cache,  data ) => 
        const accessToken = data.updateTokens.accessToken
        const refreshToken = data.updateTokens.refreshToken
        await Keychain.setGenericPassword(accessToken, refreshToken)
      
    ).then(() => console.log('We have new credentials'))
  

  const getCredentials = async () => 
    const tokens = await Keychain.getGenericPassword()
    console.log('tokens', tokens)
    const keyChainAccessToken = tokens.username
    const keyChainRefreshToken = tokens.password
    console.log('keyChainAccessToken', keyChainAccessToken)
    console.log('keyChainRefreshToken', keyChainRefreshToken)
    updateTokens(keyChainAccessToken, keyChainRefreshToken)
  

  return (
    <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
      <Text>Home Screen</Text>
      <Button title="updateTokens" onPress=getCredentials />
      <Button title="getCredentials" onPress=checkCredentials />
      <Button title="SignOut" onPress=userSignOut />
    </View>
  )

export  HomeScreen 

我可以像这样把它放到单独的文件中，然后在不同的地方使用它：

import  useMutation  from 'react-apollo-hooks'
import gql from 'graphql-tag'
import * as Keychain from 'react-native-keychain'
import jwtDecode from 'jwt-decode'

const UPDATE_TOKENS = gql`
  mutation UpdateTokens($refreshToken: String!, $refreshTokenId: String!) 
    updateTokens(refreshToken: $refreshToken, refreshTokenId: $refreshTokenId) 
      user 
        name
        phone
      
      accessToken
      refreshToken
    
  
`

const updateCredentials = () => 
  const update_tokens = useMutation(UPDATE_TOKENS)
  const updateTokens = (refreshToken, refreshTokenId) => 
    console.log('refreshToken', refreshToken)
    console.log('refreshTokenId', refreshTokenId)
    update_tokens(
      variables:  refreshToken, refreshTokenId ,
      update: async (cache,  data ) => 
        const newAccessToken = data.updateTokens.accessToken
        const newRefreshToken = data.updateTokens.refreshToken
        const user = data.updateTokens.user
        await Keychain.setGenericPassword(newAccessToken, newRefreshToken)
      
    ).then(() => console.log('We have new credentials'))
  

  const getCredentials = async () => 
    try 
      const tokens = await Keychain.getGenericPassword()
      console.log('tokens', tokens)
      const keychainAccessToken = tokens.username
      const keychainRefreshToken = tokens.password
      const currentTime = Date.now() / 1000
      const decodeAccessToken = jwtDecode(keychainAccessToken)
      console.log('decodeAccessToken', decodeAccessToken)
      const keychainRefreshTokenId = decodeAccessToken.refreshTokenId
      console.log('keychainRefreshTokenId', keychainRefreshTokenId)

      if (decodeAccessToken.exp > currentTime) 
        console.log('Credentials is still valid')
       else if (decodeAccessToken.exp < currentTime) 
        console.log('Go to Update!')
        updateTokens(keychainRefreshToken, keychainRefreshTokenId)
      
     catch (err) 
      throw new Error('Invalid credentials')
    
  

export  updateCredentials 

【参考方案1】：

对我来说，我不会为了刷新令牌而这样做。我为它做了一个中间件。

如何设置中间件：

import  createUploadLink  from 'apollo-upload-client';
const getClient = ( userStore:  token, refreshToken: refresh_token , lang , dispatch) => 
    const locale = lang || 'en';

    const uploadLink = createUploadLink(
        uri: 'http://localhost:4000'
    );

    const client = new ApolloClient(
        link: ApolloLink.from([
            getTokensMiddleware(token, refresh_token, locale, dispatch),
            uploadLink
        ]),
        cache: new InMemoryCache()
    );

    return client;
;

中间件：

const getTokensMiddleware = (token, refresh_token, locale, dispatch) => 
    return setContext(async (req,  headers, ...others ) => 
        if (!token || !refresh_token) return ;
        var decoded = jwtDecode(token);
        const isExpired = decoded.exp <= Date.now() / 1000 + 120;
        var decodedRefresh = jwtDecode(refresh_token);
        const isRefreshJWTExpired = decodedRefresh.exp <= Date.now() / 1000;
        if(isRefreshJWTExpired) return ;
        if (!isExpired) 
            return 
                ...others,
                headers: 
                    ...headers,
                    Authorization: token ? `Bearer $token` : '',
                    locale
                
            ;
        
        return new Promise((success, fail) => 
            refreshToken(refresh_token)
                .then(response => 
                    if (response.ok) 
                        return response.json();
                     else 
                        fail(response);
                    
                )
                .then(json => 
                    const  token  = json.data.refreshToken;
                    dispatch(type: "login", payload: json.data.refreshToken)
                    success(
                        ...others,
                        headers: 
                            ...headers,
                            Authorization: token ? `Bearer $token` : '',
                            locale
                        
                    );
                );
        );
    );
;

你的刷新功能：

const refreshToken = refreshToken => 
    const data = 
        operation: 'RefreshTokenMutation',
        query:
            'mutation RefreshTokenMutation($email: String!, $refreshToken: String!)   refreshToken(email: $email, refreshToken: $refreshToken)     token    refreshToken    user       id      email      username      displayname      role         title        permissions        __typename            __typename        __typename  ',
        variables:  email: 'admin_email', refreshToken: refreshToken 
    ;
    return fetch('http://localhost:4000/', 
        method: 'POST',
        headers:  'content-type': 'application/json' ,
        body: JSON.stringify(data)
    );
;

如何使用

const AppPage = () => 
    const  state, dispatch  = useStore(); //a hook for getting context containing useReducer
    return (
        <I18nextProvider i18n=i18n>
            <Helmet>
                <title>My Project</title>
                <meta name="description" content="My project" />
            </Helmet>
            <ApolloProvider client=getClient(state, dispatch)>
                <LocaleProvider locale=state.antdLocale>
                    <App />
                </LocaleProvider>
            </ApolloProvider>
        </I18nextProvider>
    );
;

【讨论】：

非常感谢您的出色回答，但您能否解释一下在创建中间件时您从何处获得此参数： userStore: token, refreshToken: refresh_token , lang , dispatch？在我的情况下，它必须来自钥匙串存储？

这些变量仅供我自己使用，您可以使用自己的方式。它们来自用于获取和更新令牌状态的 useReducer 钩子。

您能否再回答一个问题。 Apollo setContext 何时工作？在应用程序的初始化时刻还是之后？因为在我的情况下，我需要将令牌保存到 setContext，但是当应用程序初始化时，钥匙串存储没有任何令牌，因为用户尚未登录。他只有在登录后才能获得令牌。当他注销时，令牌正在擦除。但我的东西 setContext 是从一开始就开始工作的。对吗？

getTokensMiddleware 是生成中间件的函数。它在您设置 ApolloClient 时启动。 getClient 是生成 apollo 客户端的函数。我们使用令牌（状态）在应用程序运行期间生成一个新客户端。更新令牌（状态）后，它将生成一个新客户端。更新了 ans 示例。

你把 useReducer 钩子放在哪里？你能给我一个例子吗？

【参考方案2】：

如果你还想这样做，你可以用 HOC 的方式来做。

import React from 'react';
import YOUR_FUNCTIONS from '~/functions_location';

const withRefreshToken = () => (Component) => 
    return <Component ...YOUR_FUNCTIONS />
;

export 
    withRefreshToken

之后你可以这样做：

export default withRefreshToken(HomeScreen);