javascript - React Native 通过 `props` 构建的导航容器传递 `createStackNavigator`

Question

我有一个顶级 App.js 的 react-native 应用程序，即:

import { createStackNavigator } from 'react-navigation';

class App extends Component {
  render() { 
    return <AppStack {..this.props} /> 
  }
}

export withAuth(App)

其中高阶组件 withAuth 将 user 和 authenticating 属性添加到 App:

const withAuth = (Component) =>
  class WithAuth extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        authenticating: true,
        user: false
      }
    }

    componentDidMount() {
      // authenticating logic ...
      firebase.auth().onAuthStateChanged(user => {
        if (user)
          this.setState({
            authenticating: false,
            user: user
          })
        else
          this.setState({
            authenticating: false
          })
      })
    }

    render() {
      return (<Component user={this.state.user} authenticating={this.state.authenticating} {...this.props} />)
    }
  }

AppStack 是:

const AppStack = createStackNavigator( 
    { AppContainer, Profile }, 
    { initialRouteName : 'AppContainer' }
)

请注意，没有代码传递从 class App 向下传递到 AppContainer 和 Profile 的 props >。

因此 AppContainer 中的 user 和 authenticating Prop 是未定义的。

class AppContainer extends Component {
  //  this.props.user is false and this.props.authenticating is true
  componentDidMount() {
    console.log(`Debug Did mount with user: ${this.props.user}`, this.props.authenticating)
  }

  render() {
    // if I `export withAuth(AppContainer)`, then this prints the user information. but not if I log inside `componentDidMount`
    console.log(`Debug loaded with user: ${this.props.user}`, this.props.authenticating)
    return <Text>'hello world'</Text>
  }
}

export default AppContainer

我可以将 AppContainer 包装在 withAuth 中并执行 export default withAuth(AppContainer)，但是 AppContainer 不能读取 componentDidMount 中的 this.props.user 属性，仅在 render() { ... } 中。

理想情况下，我想从 AppStack 传递 user 和 authenticating 属性，我该怎么做？

注意:目前我想尽可能不使用 redux。这是一个简单的应用程序。

Answer 1

您可以通过 screenProps 将 Prop 从高阶组件传递到子屏幕。示例:

const withTest = Component => (
  class WithTest extends React.Component {
    render() {
      return (<Component screenProps={{ user: "abc" }} />);
    }
  });

检查 Navigator Props了解更多详情。