跳轉的主要方法：
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
// }
總結：
ReactNative結合了Web應用和Native應用的優勢，可以使用JavaScript來開發iOS和Android原生應用。在JavaScript中用React抽象操作系統原生的UI組件，代替DOM元素來渲染等。