React Native之React Navigation导航器
最近在学习React Native,关于界面跳转这一块,文档上面写的并不清晰,自己也是研究了很久才搞清楚用法,这里记录下。 译注:从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator,则需要先npm i facebookarchive/react-native-custom-components安装,然后从这个模块中import,即import { Navigator } from ‘react-native-deprecated-custom-components’. 今后社区主推的导航控件是react-navigation。 如果我们安装了yarn,那么只要使用yarn add react-navigation命令安装这个库就可以使用了。 如果我们在index.js入口中这么写的话 import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('ReactNativeSimple',() => App);
那么我们想在App组件中跳转到别的页面,那么我们就可以把navigation申明在App文件中然后导出,这里需要注意,default关键字不能申明在App类中了要申明在navigation导出的时候。 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,{ Component } from "react";
import {
Platform,StyleSheet,Text,View,FlatList,Image,TouchableOpacity,TouchableHighlight,NativeModules,Alert
} from "react-native";
import DemoComponent from "./DemoComponent";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,n" + "Cmd+D or shake for dev menu",android:
"Double tap R on your keyboard to reload,n" +
"Shake or press menu button for dev menu"
});
import { StackNavigator } from "react-navigation";
export class App extends Component<Props> {
static defaultProps = {
textValue: "首页默认文本"
};
constructor(props) {
super(props);
this.state = {
textValue: this.props.textValue
};
}
testOnpress = () => {
this.props.navigation.navigate("Profile",{ name: "Jane" });
};
render() {
return (
<View style={styles.container}>
<FlatList
data={[{ key: "wubo" }]}
renderItem={({ item }) => (
<View style={styles.listItem}>
<Image
style={{ width: 30,height: 30 }}
source={require("./icon.jpg")}
/>
<Text onPress={this.testOnpress}>{this.state.textValue}</Text>
</View>
)}
/>
</View>
);
}
}
const Navigate= StackNavigator({
App: { screen: App },Profile: { screen: DemoComponent }
});
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: "#F5FCFF"
},listItem: {
flexDirection: "row",justifyContent: "center"
},welcome: {
fontSize: 20,textAlign: "center",margin: 10
},instructions: {
textAlign: "center",color: "#333333",marginBottom: 5
}
});
export default AppN1;
我们在Navigation路由中申明了组件页面后,这个组件就具有了navigation props属性,我们就可以跳转到路由中申明的其他页面了。 但如果我们这样写的话主要有几点问题。 1. 我们的App没有用default申明,所以其他地方导出使用时必须是App类名不能更改这点上面已经提到。 2 . 如果我们把每个界面要跳转的页面都申明在这个组件类中,那么缺乏统一的管理显得非常混乱,这是不允许的。 常规方式我们可以单独创建个js类单独管理所有要跳转的页面。 import { StackNavigator } from "react-navigation";
import DemoComponent from "./DemoComponent";
import App from "./App";
const Navigate = StackNavigator(
{
App: { screen: App,navigationOptions: {
header: null
}
},Profile: { screen: DemoComponent }
},{
initialRouteName: "App"
}
);
export default Navigate;
这里默认显示的页面是App组件 然后App组件代码我们修改成这样 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,Alert
} from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,n" +
"Shake or press menu button for dev menu"
});
export default class App extends Component<Props> {
static defaultProps = {
textValue: "首页默认文本"
};
constructor(props) {
super(props);
this.state = {
textValue: this.props.textValue
};
}
testOnpress = () => {
this.props.navigation.navigate("Profile",height: 30 }}
source={require("./icon.jpg")}
/>
<Text onPress={this.testOnpress}>{this.state.textValue}</Text>
</View>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,marginBottom: 5
}
});
我们在index.js中把入口从App改成Navigate. import { AppRegistry } from 'react-native';
import Navigate from './NavigationManager';
AppRegistry.registerComponent('ReactNativeSimple',() => Navigate);
此时跟我们之前是一样的效果,但是把所有要跳转的页面管理在一起,代码就清爽很多,后期利于维护。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |