我的项目react-native-meituan总结与反思
react-native-meituangithub地址:https://github.com/yuwanlin/react-native-meituan.git 通过这个小项目,掌握了react-native的一些组件的用法。本项目react-native的版本是 一些变化
组件Image
Text
TextInput
ScrollView当分页的时候,在
let x = e.nativeEvent.contentOffset.x;
let y = e.nativeEvent.contentOffset.y;
<ScrollView
ref="scrollView"
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
bounces={false}
onMomentumScrollEnd={this._onMomentumScrollEnd}
onScrollBeginDrag={this._onScrollBeginDrag}
onScrollEndDrag={this._onScrollEndDrag}
>
{this.renderItems()}
</ScrollView>
ListView
// 对于没有头部的情况
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (r1,r2) => r1 !== r2,}).cloneWithRows(['1','2','3'])
}
}
// 对于具有头部的情况
constructor(props) {
super(props);
const getSectionHeaderData = (dataBlob,sectionID) => {
return dataBlob[sectionID];
};
const getRowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID+':'+rowID];
};
this.state = {
dataSource: new ListView.DataSource({
getRowData: getRowData,getSectionHeaderData: getSectionHeaderData,rowHasChanged: (r1,sectionHeaderHasChanged: (s1,s2) => s1 !== s2
})
}
}
componentDidMount() {
let carsData = ImageData.data; // 数组,每一个元素都是关于车的对象
let dataBlob = {};
let sectionID = [];
let rowID = [];
let i,j;
for(i = 0; i < carsData.length; i++) {
let carData = carsData[i];
sectionID.push(i);
dataBlob[i] = carData.title;
rowID[i] = [];
for(j = 0; j < carData['cars'].length; j++) {
rowID[i].push(j);
dataBlob[i+':'+j] = carData['cars'][j];
}
}
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,rowID)
})
}
// 数据形式如下
{
"data": [
{
"cars": [
{
"icon": "m_180_100","name": "AC Schnitzer"
},{
"icon": "m_92_100","name": "阿尔法·罗密欧"
}
],"title": "A"
},{
"cars": [
{
"icon": "m_172_100","name": "巴博斯"
}
],"title": "B"
},{
"cars": [
{
"icon": "m_129_100","name": "昌河"
}
],"title": "C"
},]
}
renderRow = (text) => <Text>text</Text>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
initialListSize={6}
onEndReachedThreshold={100}
onEndReached={() => {alert(1)}}
renderHeader={this.renderHeader}
renderFooter={this.renderFooter}
renderSeparator={this.renderSeparator}
stickySectionHeadersEnabled={true}
renderSectionHeader={this.renderSectionHeader}
stickyHeaderIndices={[0]}
>
TabNavigator(项目作者推荐使用react-navigation)TabNavigator.Item如下: <TabNavigator.Item title={title} renderIcon={() => <Image source={{uri: renderIcon}} style={styles.iconStyle}/>} renderSelectedIcon={() => <Image source={{uri: renderSelectedIcon}} style={styles.iconStyle}/>} selected={this.state.selectedTabBar===selectedTabBar} onPress={() => {this.setState({selectedTabBar})}} selectedTitleStyle={styles.selectedTitleStyle} badgeText={badgeText} >
上述属性很清晰明了。 Navigator
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。 jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。 jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。 jumpTo(route) - 跳转到已有的场景并且不卸载。 push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去 pop() - 跳转回去并且卸载掉当前场景 replace(route) - 用一个新的路由替换掉当前场景 replaceAtIndex(route,index) - 替换掉指定序列的路由场景 replacePrevious(route) - 替换掉之前的场景 resetTo(route) - 跳转到新的场景,并且重置整个路由栈 immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈 popToRoute(route) - pop到路由指定的场景,在整个路由栈中,处于指定场景之后的场景将会被卸载。 popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。
<Navigator
initialRoute={{name,component}}
configureScene={() => {return Navigator.SceneConfigs.PushFromRight}}
renderScene={(route,navigator) => {
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
TouchableOpacity
WebView(用于将一个网页运行在app上)
<WebView automaticallyAdjustContentInsets={false} style={styles.webView} source={{uri: this.state.url}} javaScriptEnabled={true} domStorageEnabled={true} decelerationRate="normal" onNavigationStateChange={this.onNavigationStateChange} onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} startInLoadingState={true} scalesPageToFit={this.state.scalesPageToFit} />
APIBackHandler(代替过时的BackAndroid)只应用于Android。用于定义当用户点击返回键时调用的函数(默认是退出应用)。 BackHandler.addEventListener('hardwareBackPress',function() {
// maybe you want to do like this
this.props.navigator.pop();
}
Dimensions用来获取屏幕的宽高以及像素比。需要注意的是,当用户旋转屏幕时,宽高是会改变的。依赖于之前宽高的元素将不再适用。我的方法是通过state变量来标志宽高。每当页面方向改变时,相应改变state属性。对于此,Dimensions有一个方法 import Dimensions from 'Dimensions';
let totalWidth = Dimensions.get('window').width; // 宽度
let totalHeight = Dimensions.get('window').height; // 高度
class Demo extends Component {
state = {
w: totalWidth,h: totalHeight
}
componentDidMount() {
Dimensions.addEventListener('change',e => {
this.setState({
w: e.window.width,h: e.window.height,})
})
}
render() {
// ...
}
}
暂时就到这里(2017.06.05); 反思做事不能懒,不能拖。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |