passProps seem doesn't work about react-native-navbar HOT 26 CLOSED

那么，它（导航栏）改变了很多，因为在这里的最后一个注释。你使用哪种版本？你能为我们提供一个代码示例？@Yidada

P.S. Google translate FTW!

from react-native-navbar.

I solve this problem by rendering scenes this way
<Component {...route.passProps} navigator={navigator} route={route} />

from react-native-navbar.

Solved the Problem though if pass props worked it could have been better feature request?

from react-native-navbar.

So, in short, you need to pass parameters to your custom components in the navbar, right? It's not implemented yet, but I think I'll try to implement it right now, good catch!

from react-native-navbar.

I don't want to pass parameters to my custom components in the navbar, but I want to pass to the next route.Just like the code in navigatorIOS example:

<NavigatorIOS
      initialRoute={{
        component: MyView,
        title: 'My View Title',
        passProps: { myProp: 'foo' },
      }}
    />

and

this.props.navigator.push({
              title: NavigatorIOSExample.title,
              component: NavigatorIOSExample,
              backButtonTitle: 'Custom Back',
              passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
            });

from react-native-navbar.

Navigator is a more low-level thing than NavigatorIOSand it doesn't support that feature out-of-box, but it's not hard to implement. You just need to apply your custom parameters to the NavigationBar in the renderScene. Basically, it's all about re-render NavigationBar with changed props, so you can use setProps or just call render. I'll make an example for that.

from react-native-navbar.

I had the same problem. Look at my last comment here: #12

from react-native-navbar.

So, have you solved this issue?

from react-native-navbar.

No,the problem is blow，I use the navigator to go to next view, but in the next view, I found all the passed props in the next view is null!!!

from react-native-navbar.

@iostalk Thanks for the screenshots, but the most important part is how you renderScene. Can you show me this part? Because all data you pass to Navigator will go to this function.

from react-native-navbar.

My render scene:

renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;
    var product = route.product;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route,
        product: product
      });
    }

    console.log(product);
    return (
      <View style={styles.navigator}>
        {navBar}
        <Component navigator={navigator} route={route} product={product} />
      </View>
    );
  },

  render: function() {
    return (
      <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: Entrance,
          navigationBar: <NavigationBar title="Hello~~~"/>,
          product: product
        }}
      />
    );
  }

from react-native-navbar.

@iostalk ok, this code is totally fine, in your Entrance component you should get access to your product thru this.props.product. Is it Entrance component on the screenshots?

from react-native-navbar.

I could get the passProps in the router, I figure it out!

from react-native-navbar.

@iostalk strange, I don't see you passing passProps in this code.

from react-native-navbar.

我也遇到了同样的问题，使用navigator 的时候，好像它不跟NavigatorIOS一样会传递参数，我想问下您后来是怎么解决这个问题的呢？@iostalk

from react-native-navbar.

You are so cool for translating my words.Do you mean my react-native version? It's 0.14. and my code seems like this:

onPress: function () {
  var value = this.refs.main.refs.form.getValue();
  if (value) {
    this.props.navigator.push({
      id:'RegPhone2',
      passProps: {phonNum:value}
    })
  }
},

from react-native-navbar.

I'm not quite sure, but it could be that you have a problem with your refs. If that's not the case, then I'd like to know, where do you use your passProps? I can't find anything about it neither inside official Navigator documentation nor in my API specs.

from react-native-navbar.

You know, In China we don't have such a good react environment. many apis or functions need to be guess...hahaha ,sorry for my not rigorous. I'll read your API specs maybe I can found my solution.😊

from react-native-navbar.

May be my question is just how to pass props when we use the Navigator to route my app?

from react-native-navbar.

Well, I can explain it! When you use <Navigator />, you're able to specify a renderScene function which will decide how to render your scene. It accepts two arguments: route and navigator. In your particular case you're interested in a route. Every time you push a new route, you can pass any extra params to it and then use it to render your component. You can take a look on example I have here. So, in this example I use Navigator's initialRoute property, which specifies the initial route in your application. It may contain any fields you want. In my case it's a component I render inside the scene. But at the same moment you can pass foo: 'bar' and use it thru the route.foo property to inject it into your component.

Hope this helped!

from react-native-navbar.

It's really helpful for me! I read your example and try it in my app .It works ! Thanks again!😊

from react-native-navbar.

@Kureev - Thanks for the explanation!

Your idea of passing 'route' as a property of a component in 'renderScene' method solved my problem too. Now I am able to access 'myInfo' value (which i passed using 'passProp' while pushing new scene) in my new scene like this: 'this.props.route.passProps.myInfo'

I hope its the standard way of accessing 'passProps' in new scene.

from react-native-navbar.

maybe this.props.navigator.navigationContext.currentRoute can solve ur problems.

from react-native-navbar.

You can also pass the prop through this.props.navigator by creating a new property if it's within the same stack of I believe.

from react-native-navbar.

@windhost it work for me!thanks~ 👍 👍

from react-native-navbar.

It seems like really an early topic from now, current RN version is 0.43, try below
this.props.navigator.push({ component: ProfileUpdate, args: {type: 'birth'} })
and get params in 'ProfileUpdate' page like:
const type = this.props.type

maybe can help some guys like me :)

from react-native-navbar.