Question

我还是一个学习者，所以如果我没有正确的问题描述语，我深表歉意。

因此，我正在尝试各种与身份验证和Web api进行交互的方法，然后我遇到了另一本教程（https://medium.com/@njwest/building-a-react-native-jwt-client-api-requests-and-asyncstorage-d1a20ab60cf4），并成功地使用该教程创建了该应用程序。

但是，我试图将其与导航一起工作，而不是仅仅在屏幕上工作，并且遇到了我不太确定的事情。

在App.js中，有一个函数以及构造函数中的相关状态：

  constructor(props){
    super(props);
    this.state = {
      isLoadingComplete: false,
      isAuthenticationReady: false,
      isAuthenticated: false,
      jwt: '',
    };

    this.newJWT = this.newJWT.bind(this);
    this.deleteJWT = deviceStorage.deleteJWT.bind(this);
    this.loadJWT = deviceStorage.loadJWT.bind(this);
}

  newJWT(jwt){
    this.setState({
      jwt: jwt
    });
}

然后在渲染中稍微降低一点，我将其传递给本教程，类似于本教程：

 return(
         <RootNavigation newJWT={this.newJWT}/>
       );

转到RootNavigation文件，它同时具有createBottomTabNavigator和createStackNavigator，如下所示：

const LoginStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: () => ({
      title: 'Login',
      headerTintColor: '#ffffff',
        headerStyle: {
            backgroundColor: '#171F33',
            borderBottomColor: 'black',
            borderBottomWidth: 0,
        },
        headerTitleStyle: {
            fontSize: 18,
        }
    }),
  }
});

LoginStack.navigationOptions = {
  tabBarLabel: 'Login',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : ''}`
          : 'md-home'
      }
    />
  ),
};



const RootStackNavigator = createBottomTabNavigator({
  LoginStack,
}, {
    tabBarOptions: {
        showLabel: true,
        activeTintColor: '#F8F8F8',
        inactiveTintColor: '#586589',
        style: {
            backgroundColor: '#171F33'
        },
        tabStyle: {}
    }
});

我在这里很困，因为我不确定过渡点。在本教程中，他们没有使用堆栈导航，并且鉴于我看不到没有过渡点的很多（如果有的话）一页应用程序，我觉得这并不是我的完整教程。

因此，如果我们转到LoginScreen，这是跳闸的部分，它是一个函数：

  loginUser() {
    const { email, password, password_confirmation } = this.state;

    this.setState({ error: '', loading: true });

    const data = {
            grant_type: 'password',
            client_id: 2,
            client_secret: apiConfig.clientId,
            username: email,
            password: password,
            scope: '*',
        }

  axios.post(apiConfig.oauthURL, data)
    .then((response) => {
      deviceStorage.saveKey("id_token", response.data.access_token);
      this.props.newJWT(response.data.access_token);       
    })
    .catch((error) => {
      console.log(error);
      this.onLoginFail();
    });
}

上面的axios实际上可以工作，唯一的不行是此行： this.props.newJWT(response.data.access_token);

哪个在我的控制台中返回错误： _this2.props.newJWT is not a function. (In '_this2.props.newJWT(response.data.access_token)', '_this2.props.newJWT' is undefined)

原始存储库在这里：https://github.com/njwest/React-Native-JWT-Client，但我正在研究一种零食，以允许完整查看我的代码。如有其他问题，请随时提出，我将非常感谢。

小吃现在位于这里：https://snack.expo.io/@mprythero/rude-peach

React Native-通过导航器往返App.js的操作

0 个答案: