react-native最新的ES6基於頁面跳轉和傳值
阿新 • • 發佈:2019-01-09
引導頁面:最新的react-native頁面跳轉和傳值
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
AppRegistry,
Platform,
Component,
TouchableOpacity,
StyleSheet,
Navigator,
View,
Text
} from 'react-native';
import Splash from './Splash';
const defaultRoute = {//設定預設頁面
component: Splash
};
class navigation extends Component {
_renderScene(route, navigator) {//註冊route
let Component = route.component;
return (//將route值傳入navigator裡面
<Component {...route.params} navigator={navigator}/>
);
}
_renderNavBar() {
const styles = {
title: {
flex: 1 , alignItems: 'center', justifyContent: 'center'
},
button: {
flex: 1, width: 50, alignItems: 'center', justifyContent: 'center'
},
buttonText: {
fontSize: 18, color: '#FFFFFF', fontWeight: '400'
}
}
/**
*定義頁面navigator.NavigationBar變數
*/
var routeMapper = {
LeftButton(route, navigator, index, navState) {//左邊按鈕
if (index > 0) {
return (
<TouchableOpacity
onPress={() => navigator.pop()}//退棧
style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</TouchableOpacity>
);
} else {
return (
<TouchableOpacity
onPress={() => navigator.pop()}
style={styles.button}>
<Text style={styles.buttonText}>Logo</Text>
</TouchableOpacity>
);
}
},
RightButton(route, navigator, index, navState) {//右邊按鈕
if (index > 0 && route.rightButton) {
return (
<TouchableOpacity
onPress={() => navigator.pop()}
style={styles.button}>
<Text style={styles.buttonText}></Text>
</TouchableOpacity>
);
} else {
return null
}
},
Title(route, navigator, index, navState) {//主標題
return (
<View style={styles.title}>
<Text style={styles.buttonText}>{route.title ? route.title : 'Splash'}</Text>
</View>
);
}
};
return (
<Navigator.NavigationBar
style={{
alignItems: 'center',
backgroundColor: '#55ACEE',
shadowOffset: {
width: 1,
height: 0.5,
},
shadowColor: '#55ACEE',
shadowOpacity: 0.8,
}}
routeMapper={routeMapper}
/>
);
}
render() {
return (
<Navigator
initialRoute={defaultRoute}
renderScene={this._renderScene}
sceneStyle={{paddingTop: (Platform.OS === 'android' ? 66 : 74)}}
navigationBar={this._renderNavBar()}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('navigation', () => navigation);
第一個頁面splash介面:
import React, {
View,
Text,
TouchableOpacity
} from 'react-native';
import Login from './Login';
class Splash extends React.Component {
_openPage() {//開啟login頁面
this.props.navigator.push({
title: 'Login',
component: Login
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor: '#FFFFFF' }}>
<Text>Splash Page</Text>
<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={{ color: '#55ACEE' }}>Open New Page</Text>
</TouchableOpacity>
</View>
);
}
}
export default Splash;
第二個頁面login頁面:
import React, {
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
import Welcome from './Welcome';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
age: null,
}
}
_openPage() {//開啟welcome頁面,將welcome頁面壓入navigator裡面
this.props.navigator.push({
component: Welcome,
params: {
name: this.state.name,
age: this.state.age,
changeMyAge: (age) => {//獲取值存入welcome.state裡面
this.setState({ age })
}
}
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor: '#FFFFFF' }}>
<Text>Form Page</Text>
<TextInput
value={this.state.name}
onChangeText={name => this.setState({ name })}
placeholder={'Enter your name'}
style={{ height: 40, width: 200 }} />
<Text>My age: {this.state.age ? this.state.age : 'Unknown'}</Text>
<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={{ color: '#55ACEE' }}>Update my age</Text>
</TouchableOpacity>
</View>
);
}
}
export default Login;
第三個頁面welcome頁面:
import React, {
TextInput,
View,
Text,
TouchableOpacity
} from 'react-native';
class Welcome extends React.Component {
_back() {//退棧,將welcome頁面退出來
this.props.navigator.pop();
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor: '#FFFFFF' }}>
<Text>Welcome Page</Text>
<Text>Welcome to Navigation! {this.props.name}</Text>
<TextInput
onChangeText={age => this.props.changeMyAge(age) }
placeholder={'Enter your age:'}
style={{ height: 40, width: 200 }} />
<TouchableOpacity onPress={this._back.bind(this)}>
<Text style={{ color: '#55ACEE' }}>Save my age</Text>
</TouchableOpacity>
</View>
);
}
}
export default Welcome;