In my React Native project I have an import:
import { Actions as NavigationActions } from 'react-native-router-flux'
I also have a prop type for a route of this.props.route which equates to 'someRoute'. I would like to use the two together effectively like this:
<TouchableOpacity onPress={NavigationActions.this.props.route}>
Obviously that doesn't work but how can use the two together?
I've tried
const { route } = this.props
<TouchableOpacity onPress={NavigationActions.route}>
and also
<TouchableOpacity onPress={{$NavigationActions}.${route}}>
but neither work. Can anyone show me what I'm doing wrong
See react-native-router-flux minitutorial.
You aren't meant to access their props.
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
<Text onPress={Actions.pageTwo}>This is PageOne!</Text>
Edit:
Since you are looking forward dynamic redirection, the approach is the same as if you were dealing with objects.
a = { foo: 'bar' } -> a.foo or a['foo'] (second being the dynamic version)
That is Action[page] in your case.
Which becomes
const route = this.props.route;
<TouchableOpacity onPress={NavigationActions[route]}>
Make sure that route is actually the key that the Scene has.
You can try like this NavigationActions[this.props.route] if your router have a scene with the value this.props.route
<TouchableOpacity onPress={NavigationActions[this.props.route]}>
If this doesn't work check the Router you defined whether it have a scene with key have the value of this.props.route.
You can use this:
const route = this.props.route;
Actions[route]()