Skip to content

Commit c39329b

Browse files
879479119879479119
committed
修复了在高分屏中的渣显示问题；
添加了一个用于测试的temp模块，在index中可以直接进入temp； 尝试使用onScroll和state刷新动画，失败； 尝试使用双层scrollView实现折叠功能，在temp中实验；
1 parent 177e941 commit c39329b

File tree

7 files changed

+113
-23
lines changed

7 files changed

+113
-23
lines changed

‎index.android.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,19 @@ import {
1515
// import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
1616
import main from './static/component/main/main';
1717
import splash from './static/component/splash/splash';
18-
18+
//temp模块做调试的时候用
19+
import temp from './static/component/temp';
1920
var _navigator = null;
2021

22+
2123
class entrance extends Component{
2224
constructor(props){
2325
super(props);
2426
}
2527
render(){
2628
return(
2729
<Navigator
28-
initialRoute={{name:"splash",component:splash}}
30+
initialRoute={{name:"splash",component:main}}
2931
renderScene={
3032
(route,navigator) =>{
3133
_navigator = navigator;

‎static/component/main/main.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
* Created by zi on 2016/7/23.
33
*/
44
import React, { Component } from 'react';
5+
//noinspection JSUnresolvedVariable
56
import {
67
StyleSheet,
78
Text,
89
View,
910
Image,
1011
ViewPagerAndroid,
1112
DrawerLayoutAndroid,
13+
Dimensions,
14+
PixelRatio,
1215
ScrollView,
1316
RefreshControl,
1417
TouchableWithoutFeedback,
@@ -88,7 +91,7 @@ class ViewPager extends Component{
8891
<Text>2121</Text>
8992
</View>
9093
<View style={{flex:1}}>
91-
<Hot/>
94+
<Hot refresh={this.props.refresh}/>
9295
</View>
9396
<View>
9497
<Text>2121</Text>
@@ -113,17 +116,14 @@ var __navigator = null;
113116
class main extends Component{
114117
constructor(props){
115118
super(props);
116-
this.state={value:1,drawer:"close",dy:0};
119+
this.multi = PixelRatio.get();
120+
this.state = {value:1,drawer:"close",offsetY:0};
117121
__navigator = this.props.navigator;
118122
}
119123
componentDidMount(){
120124
this.listener = RCTDeviceEventEmitter.addListener('closeDrawer',()=>{
121125
this._closeDrawer();
122126
});
123-
this.listener2 = RCTDeviceEventEmitter.addListener('scroll',(dy)=>{
124-
console.log(dy);
125-
this.setState({offsetY:dy});
126-
});
127127
}
128128
navigationView(){
129129
return(
@@ -133,6 +133,11 @@ class main extends Component{
133133
componentWillUnmount(){
134134
//TODO:卸载事件绑定
135135
}
136+
_refresh(dy){
137+
console.log(this._refresh);
138+
// this.prevY = this.state.offsetY;
139+
// this.setState({offsetY:dy * this.multi});
140+
}
136141
_goDownload(){
137142
this.props.navigator.push({
138143
name:"download",
@@ -149,6 +154,7 @@ class main extends Component{
149154
}
150155
render(){
151156
//TODO:需要改成向上拉就能折叠的抽提效果，但是调用频率实在太低了不能做成连贯的动画
157+
let w = Dimensions.get("window").width * PixelRatio.get();
152158
return(
153159
<DrawerLayoutAndroid
154160
ref={(drawer)=>this._drawer = drawer}
@@ -157,7 +163,7 @@ class main extends Component{
157163
renderNavigationView={(()=>{return this.navigationView})()}
158164
>
159165
<View style={{flex:1}}>
160-
<View style={{position:"absolute",flex:1,width:360,top:0}}>
166+
<View style={{position:"absolute",flex:1,width:w,top: -this.prevY - this.state.offsetY}}>
161167
<View style={style.header}>
162168
<View style={style.headerLeft}>
163169
<TouchableWithoutFeedback onPress={this._openDrawer.bind(this)}>
@@ -187,7 +193,7 @@ class main extends Component{
187193
<Selector/>
188194
</View>
189195
<View style={{backgroundColor:"#00bfff",flex:1,position:"relative",top:95}}>
190-
<ViewPager/>
196+
<ViewPager refresh={this}/>
191197
</View>
192198
</View>
193199
</DrawerLayoutAndroid>

‎static/component/main/style.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/**
22
* Created by zi on 2016/7/23.
33
*/
4-
import {StyleSheet,Dimensions} from 'react-native';
4+
//noinspection JSUnresolvedVariable
5+
import {StyleSheet,Dimensions,PixelRatio} from 'react-native';
56

6-
let w = Dimensions.get("window").width;
7+
let w = Dimensions.get("window").width * PixelRatio.get();
78

89
module.exports = StyleSheet.create({
910
top:{
@@ -46,7 +47,7 @@ module.exports = StyleSheet.create({
4647
face:{
4748
height:31,
4849
width:31,
49-
borderRadius:31
50+
borderRadius:100 //非常的诡异，设置成31的时候，在高分辨率屏幕下不是圆角，所以大一点
5051
},
5152
username:{
5253
fontSize:16,

‎static/component/page/hot/hot.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@ class hot extends Component{
2424
this.prevY = 0;
2525
}
2626
_scroll(evt){
27-
let curY = evt.nativeEvent.pageY;
28-
if(curY > this.prevY){
29-
console.log("down");
30-
}
27+
let curY = evt.nativeEvent.contentOffset.y;
28+
// this.props.refresh._refresh(curY - this.prevY);
29+
let main = this.props.refresh;
30+
console.log(this.props.refresh);
31+
main.setState({offsetY:(curY - this.prevY) * main.multi});
3132
this.prevY = curY;
33+
main.prevY = main.state.offsetY;
3234
}
3335
componentWillMount() {
3436
this._panResponder = PanResponder.create({
@@ -52,10 +54,8 @@ class hot extends Component{
5254
progressBackgroundColor="#ffffff"
5355
/>
5456
}
55-
onLayout={this._scroll.bind(this)}
56-
onStartShouldSetResponder={()=>true}
57-
onMoveShouldSetResponder={()=>true}
58-
{...this._panResponder.panHandlers}
57+
onScroll={this._scroll.bind(this)}
58+
5959
>
6060
<View style={{height:1000,flex:1}}>
6161
<Swiper style={style.wrapper}

‎static/component/sider/sider.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class sider extends Component{
4343
<View style={style.left}>
4444
<TouchableWithoutFeedback style={style.faceTouch}>
4545
<View style={style.faceBorder}>
46-
<Image resizeMode={Image.resizeMode.contain} source={require('./img/face.jpg')} style={{borderRadius:35,width:70,height:70}}/>
46+
<Image resizeMode={Image.resizeMode.contain} source={require('./img/face.jpg')} style={{borderRadius:70,width:70,height:70}}/>
4747
</View>
4848
</TouchableWithoutFeedback>
4949
<View style={style.user}>

‎static/component/sider/style.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = StyleSheet.create({
2828
faceTouch:{
2929
},
3030
faceBorder:{
31-
borderRadius:36,
31+
borderRadius:72,
3232
justifyContent:"center",
3333
width:72,
3434
height:72,

‎static/component/temp.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* Created by zi on 2016/7/29.
3+
*/
4+
5+
import React, { Component } from 'react';
6+
//noinspection JSUnresolvedVariable
7+
import {
8+
StyleSheet,
9+
Text,
10+
View,
11+
Image,
12+
ScrollView,
13+
RefreshControl,
14+
PanResponder,
15+
} from 'react-native';
16+
17+
class view extends Component{
18+
render(){
19+
return(
20+
<View style={{backgroundColor:"#000",flex:1}}>
21+
<View style={{backgroundColor:"#ddd",height:100}}>
22+
<Text>566666666666666</Text>
23+
</View>
24+
<ScrollView style={{backgroundColor:"#000",height:570}}
25+
onStartShouldSetResponder={()=>true}
26+
onMoveShouldSetResponder={()=>true}>
27+
<View style={{backgroundColor:"#00bfff",height:1200}}>
28+
<Text>23333333</Text>
29+
</View>
30+
</ScrollView>
31+
</View>
32+
);
33+
}
34+
}
35+
36+
class scroll extends Component{
37+
render(){
38+
return(
39+
<Scrollview style={{backgroundColor:"#000",flex:1}} onSroll={this.props.fn}>
40+
<View style={{backgroundColor:"#ddd",height:100}}>
41+
<Text>566666666666666</Text>
42+
</View>
43+
<ScrollView style={{backgroundColor:"#000",height:570}}
44+
onStartShouldSetResponder={()=>true}
45+
onMoveShouldSetResponder={()=>true}>
46+
<View style={{backgroundColor:"#00bfff",height:1200}}>
47+
<Text>23333333</Text>
48+
</View>
49+
</ScrollView>
50+
</Scrollview>
51+
);
52+
}
53+
}
54+
55+
class hot extends Component{
56+
constructor(props){
57+
super(props);
58+
this.state = {s:true};
59+
}
60+
componentWillMount() {
61+
62+
}
63+
_handle(evt){
64+
let curY = evt.nativeEvent.contentOffset.y;
65+
if(curY == 0){
66+
this.setState({s:false});
67+
}
68+
}
69+
render(){
70+
console.log(this);
71+
return(
72+
<View style={{flex:1}}>
73+
{view
74+
}
75+
</View>
76+
);
77+
}
78+
}
79+
80+
81+
module.exports = hot;

0 commit comments

Comments
 (0)