react native 之页面跳转

第一章 跳转的实现

1.component 中添加这行代码

<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 主要运用于点击事件中

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

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/>这个标签 但反过来可以

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

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 实现不同的跳转

第二章 跳转效果的展示

react native 中的跳转效果可以很轻松的设置,不像js 中需要设置相应的动画效果,它主要是通过这一行代码设置的

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

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

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