Question

我的问题是我想访问组件中的容器，但它似乎是未定义的。

我使用的是Unstated，如您所见，这是容器文件（login-container.js）中的代码：

import { Container } from 'unstated'
class LoginContainer extends Container {
    constructor(props){
        super(props)
        this.state = {
            stepNumber: 0,
        }
    }
}
export default new LoginContainer()

这是app.js：

import React, { Component } from 'react'
import {  createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'

export default class App extends Component {
  render() {
    return (
      <Provider inject={[LoginContainer]}>          
          <AuthStack/>                            
      </Provider>
    )
  }
}

const SplashStack = createStackNavigator(...)

const AppStack = createStackNavigator(...)

const AuthStack = createStackNavigator(
  {
    Intro: { screen: Intro},
    Login: { screen: Login}
  },
  {
    headerMode: "none",
    initialRouteName: "Intro"
  }
)

const SwitchNavigator = createSwitchNavigator(...)

这将是login.js：

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class Login extends Component {
  constructor(props){
    super(props)
  }

  render() {
    // const { state: {stepNumber} } = this.props.loginContainer
    alert(this.props.LoginContainer)
    return (
      <View>
        <Text>  someText  </Text>
      </View>
    )
  }
}

我以前曾尝试使用“订阅”组件将容器注入到我的应用程序中，但我得到的东西却与此相同。

使用
-本机0.58.6
-react-navigation 2.13.0（由于v3中的一些错误）
-未声明的2.1.1

Answer 1

Unstated真正的优点是实现起来非常简单。只需将渲染组件包装在Unstated的{{1}}标签中，您就可以开始使用了。每当您在容器中<Subscribe to></Subscribe>时，所有setState()的{{1}}都将使用Components的更新的Subscribe属性值重新渲染。

Container

使用React导航的React Native组件中的未定义未声明容器

1 个答案: