react native 之页面跳转

时间 2019-11-11

标签 react native 页面栏目 React 繁體版

原文原文链接

第一章跳转的实现react

1.component 中添加这行代码app

<View style={styles.loginmain}>
          <Text style={styles.logintext} onPress={() => navigator.push({name:'In'})}>注册</Text>
          <Text style={styles.logintext} onPress={() => navigator.push({name:'Forget'})}>忘记密码          </Text>
</View>

onPress 主要运用于点击事件中ide

2.在运行的主页面中只能运行以下的component flex


const thunkMiddleWare = (store) => (next) => (action) => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState)
  }
  return next(action)

export default function () {
  return (
    <Provider store={createStore(reducer, applyMiddleware(thunkMiddleWare))}>
      <NavigatorApp />
    </Provider>
  )
}

须要注意的是:a. middleware 是中间件的设置,它有固定的格式.动画

<view/> 不能包含<Navigator/>这个标签但反过来能够this

3.点击跳转的页面的设置代码spa

function InComponent({navigator}){
    return (
        <View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}>
            <Text style={styles.size} onPress={() => navigator.pop()} >注册</Text>
        </View>
    )

}




function ForgetComponent({navigator}){
    return (
        <View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}>
            <Text style={styles.size} onPress={() => navigator.pop()} >忘记密码</Text>
        </View>
    )

}










export default class NavigatorApp extends Component {
    render() {
        return (

            <Navigator
                initialRoute={{name:'Main'}}
                renderScene={this.renderScene}
                navigationBar ={this.navigationBar}
            />

        );
    }



    renderScene(route,navigator){

        if (route.name==="Main"){
            return <App  navigator={navigator}/>
        }

        if (route.name==="In"){
            return <InComponent navigator={navigator}/>
        }

        if (route.name==="Forget"){
            return <ForgetComponent navigator={navigator}/>
        }

        if (route.name==='Nav'){
            return <NavComponent navigator={navigator} />
        }
    }

    // configureScene (route,navigator) {
    //     return Navigator.SceneConfigs.FloatFromBottom
    // }
}

根据name 实现不一样的跳转code

第二章跳转效果的展现component

react native 中的跳转效果能够很轻松的设置,不像js 中须要设置相应的动画效果,它主要是经过这一行代码设置的中间件

 configureScene (route,navigator) {
        return Navigator.SceneConfigs.FloatFromBottom
    }

这是从下往上跳出的效果.

react native 中还有哪些跳转效果,后期继续补充