javascript - React Native pass `props` through navigation container built by `createStackNavigator` - Stack Overflow

admin2025-04-19 0

I have a react-native app with top level App.js that is:

import { createStackNavigator } from 'react-navigation';

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

export withAuth(App)

Where the higher order ponent withAuth adds user and authenticating props to App:

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

    ponentDidMount() {
      // 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} />)
    }
  }

And the AppStack is:

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

Note there is no code passing the props that was passed down from class App down to AppContainer and Profile.

Consequentially the user and authenticating props inside AppContainer is undefined.

class AppContainer extends Component {
  //  this.props.user is false and this.props.authenticating is true
  ponentDidMount() {
    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 `ponentDidMount`
    console.log(`Debug loaded with user: ${this.props.user}`, this.props.authenticating)
    return <Text>'hello world'</Text>
  }
}

export default AppContainer

I could wrap AppContainer inside withAuth and do export default withAuth(AppContainer), but then AppContainer cannot read this.props.user property in ponentDidMount, only in render() { ... }.

Ideally I would like to pass down the user and authenticating property from AppStack, how would I do so?

Note: for now I would like to not use redux if possible. This is a simple app.

I have a react-native app with top level App.js that is:

import { createStackNavigator } from 'react-navigation';

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

export withAuth(App)

Where the higher order ponent withAuth adds user and authenticating props to App:

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

    ponentDidMount() {
      // 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} />)
    }
  }

And the AppStack is:

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

Note there is no code passing the props that was passed down from class App down to AppContainer and Profile.

Consequentially the user and authenticating props inside AppContainer is undefined.

class AppContainer extends Component {
  //  this.props.user is false and this.props.authenticating is true
  ponentDidMount() {
    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 `ponentDidMount`
    console.log(`Debug loaded with user: ${this.props.user}`, this.props.authenticating)
    return <Text>'hello world'</Text>
  }
}

export default AppContainer

Ideally I would like to pass down the user and authenticating property from AppStack, how would I do so?

Note: for now I would like to not use redux if possible. This is a simple app.

Share Improve this question edited Jul 23, 2018 at 13:35 Rick 4,1249 gold badges27 silver badges37 bronze badges asked Jul 22, 2018 at 17:09 xiaolingxiao 4,8956 gold badges44 silver badges91 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You can pass props from your high order ponent to child screen through screenProps. Example:

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

Check Navigator Props for more detail.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745077545a283659.html

javascriptReact Native pass props through navigation container built by createStackNavigatorStack Overflow

最新回复(0)