react-native-router-flux研究總結(jié)
框架集成步驟
-
配置
package.json依賴"react": "^0.14.7", "react-native": "0.22.2", "react-native-button": "^1.2.1", "react-native-drawer": "^1.16.7", "react-native-modalbox": "^1.3.0", "react-native-router-flux": "file:../" #此處react-native-route-flux框架可以通過npm info查看 -
配置
index.js文件中的Scene捧杉，注冊(cè)可以跳轉(zhuǎn)的頁(yè)面#定義reducers const reducerCreate = params => { const defaultReducer = Reducer(params); return (state, action) => { console.log("ACTIONS:" ,action); return defaultReducer(state, action); } } #注冊(cè)好所有可以跳轉(zhuǎn)的頁(yè)面和跳轉(zhuǎn)用來傳參的key值 class MyExample extends React.Component { constructor(props) { super(props) } render() { return <Router createReducer={reducerCreate}> <Scene key="modal" component={Modal}> <Scene key="root"> <Scene key="Launch" component={Launch} title="Launch" initial={true}/> <Scene key="login" component={Login} title="Login" /> </Scene> </Scene> </Router> } } #此處的key=login對(duì)于下面很有用處 -
首頁(yè)和其他供跳轉(zhuǎn)的頁(yè)面的寫法
class Launch extends React.Component { constructor(props) { super(props) } render() { return ( <View {...this.props} style={styles.container}> <Text>這是首頁(yè)！</Text> <Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button> </View> ) } } #根據(jù)步驟二中的key=login來傳遞參數(shù)Ａ罨ā：涤住扼脐！
