RN - router-flux

之前刚写过一个RN的navigation入门,通过写了几个简单的页面组件和导航跳转,发现了还是需要一个比较强大的导航组件.

所以这次选择了react-native-router-flux

Mini-Tutorial

import { Router, Scene } from 'react-native-router-flux';

import PageOne from './src/PageOne';
import PageTwo from './src/PageTwo';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

从这个基本的结构可以看出,很像react-router了
组件,key,title比较直观明了

import {Actions} from 'react-native-router-flux';

export default class PageOne extends Component {
    render() {
        return (
            <View style={{
                margin: 128
            }}>
                <Text onPress={() => Actions.pageTwo({text: "gogogoogo"})}>This is PageOne!</Text>
            </View>
        )
    }
}

跳转用的key,也可以各种传参数

export default class PageOne extends Component {
    render() {
        return (
            <View style={{
                margin: 128
            }}>
                <Text>This is PageTwo!</Text>
                <Text onPress={()=>Actions.pop()} >{this.props.text}</Text>
            </View>
        )
    }
}

回跳也还可以,要是能回跳时候带参数就爽了