React-native-router-flux: Suggest new feature for this plugin. Can add the protype 'onPress' to scene

Created on 20 Apr 2016 · 3Comments · Source: aksonov/react-native-router-flux

Version

react-native-router-flux v3.24.0
react-native v0.24.0

New feature

I want to add an action to the tab,and such like this :
<Scene key="main" tabs={true} ...> <Scene key="AAAA" component={AAAPage} .../> <Scene key="Button" onPress={()=> ... } .../> <Scene key="CCCC" component={CCCPage} .../> </Scene>
the scence 'button' can add onPress protype to bind an action.

Source

llgoer

Most helpful comment

fix react-native-router-flux/src/TabBar.js onSelect function.

...
export default class extends Component {
    onSelect(el){
        const state = this.props.navigationState;
        if (!Actions[el.props.name]){
            throw new Error("No action is defined for name="+el.props.name+" actions:"+JSON.stringify(Object.keys(Actions)));
        }

        // rewrite Actions[el.props.name]();
        if (!el.props.modal) {
            Actions[el.props.name]();
        }
        else {
          el.props.onPress();
        }
    }

...

react native files look like this:

        <Scene key="main" tabs={true}>
            ...
            <Scene key="OtherPage" component={OtherPageModal} modal={true} onPress={()=>alert("Test")} ... />
            ...
        </Scene>

phproot on 22 Apr 2016

👍2 ❤1 😄1

All 3 comments

IMO this is out of scope of this project. This is a navigation stack.

Also adding this new feature can significantly disrupt onPress calls from downstream components or can introduce delays in complex views; for example views using ListView

You can accomplish this by simply adding onPress in the top view of each of your pages.

rturk on 21 Apr 2016

fix react-native-router-flux/src/TabBar.js onSelect function.

...
export default class extends Component {
    onSelect(el){
        const state = this.props.navigationState;
        if (!Actions[el.props.name]){
            throw new Error("No action is defined for name="+el.props.name+" actions:"+JSON.stringify(Object.keys(Actions)));
        }

        // rewrite Actions[el.props.name]();
        if (!el.props.modal) {
            Actions[el.props.name]();
        }
        else {
          el.props.onPress();
        }
    }

...

react native files look like this:

        <Scene key="main" tabs={true}>
            ...
            <Scene key="OtherPage" component={OtherPageModal} modal={true} onPress={()=>alert("Test")} ... />
            ...
        </Scene>

phproot on 22 Apr 2016

👍2 ❤1 😄1

perfect!!!

llgoer on 22 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings