Flask接口签名sign原理与实例代码浅析
227
2023-07-05
ReactNative页面跳转实例代码
效果图如下所示:
进入工作目录,运行
react-native init NavigatorProject
创建项目NavigatorProject
import React, { ComponentDzggR } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native';
class navigatorProject extends Component{
render(){
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;
return(
initialRoute = {{name: defaultName, component: defaultComponent}} //初始化导航器Navigator,指定默认的页面 configureScene = { (route) => { return Navigator.SceneConfigs.FloatFromRight; //配置场景动画,页面之间跳转时候的动画 } } renderScene = { (route, navigator) =>{ let Component = route.component; return } } /> ); } } //第一个页面 class FirstPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({ //navigator.push 传入name和你想要跳的组件页面 name: "SecondPageComponent", component: SecondPageComponent }); } } render(){ return( underlayColor = "rgb(180,135,250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> ); } } //第二个页面 class SecondPageComponent extends Component{ clickJump(){ const{navigator} = this.prohttp://ps; if(navigator){ navigator.pop(); //navigator.pop 使用当前页面出栈, 显示上一个栈内页面. } } render(){ return( underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }); AppRegistry.registerComponent('navigatorProject', () => navigatorProject); 以上所述是给大家介绍的ReactNative页面跳转实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
initialRoute = {{name: defaultName, component: defaultComponent}} //初始化导航器Navigator,指定默认的页面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight; //配置场景动画,页面之间跳转时候的动画
}
}
renderScene = {
(route, navigator) =>{
let Component = route.component;
return
}
}
/>
);
}
}
//第一个页面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({ //navigator.push 传入name和你想要跳的组件页面
name: "SecondPageComponent",
component: SecondPageComponent
});
}
}
render(){
return(
underlayColor = "rgb(180,135,250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}>
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
);
}
}
//第二个页面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.prohttp://ps;
if(navigator){
navigator.pop(); //navigator.pop 使用当前页面出栈, 显示上一个栈内页面.
}
}
render(){
return(
underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}>
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});
AppRegistry.registerComponent('navigatorProject', () => navigatorProject);
以上所述是给大家介绍的ReactNative页面跳转实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~