Skip to content

Commit

Permalink
修复了在高分屏中的渣显示问题;
Browse files Browse the repository at this point in the history
添加了一个用于测试的temp模块,在index中可以直接进入temp;
尝试使用onScroll和state刷新动画,失败;
尝试使用双层scrollView实现折叠功能,在temp中实验;
  • Loading branch information
879479119 committed Jul 29, 2016
1 parent 177e941 commit c39329b
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 23 deletions.
6 changes: 4 additions & 2 deletions index.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@ import {
// import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
import main from './static/component/main/main';
import splash from './static/component/splash/splash';

//temp模块做调试的时候用
import temp from './static/component/temp';
var _navigator = null;


class entrance extends Component{
constructor(props){
super(props);
}
render(){
return(
<Navigator
initialRoute={{name:"splash",component:splash}}
initialRoute={{name:"splash",component:main}}
renderScene={
(route,navigator) =>{
_navigator = navigator;
Expand Down
22 changes: 14 additions & 8 deletions static/component/main/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
* Created by zi on 2016/7/23.
*/
import React, { Component } from 'react';
//noinspection JSUnresolvedVariable
import {
StyleSheet,
Text,
View,
Image,
ViewPagerAndroid,
DrawerLayoutAndroid,
Dimensions,
PixelRatio,
ScrollView,
RefreshControl,
TouchableWithoutFeedback,
Expand Down Expand Up @@ -88,7 +91,7 @@ class ViewPager extends Component{
<Text>2121</Text>
</View>
<View style={{flex:1}}>
<Hot/>
<Hot refresh={this.props.refresh}/>
</View>
<View>
<Text>2121</Text>
Expand All @@ -113,17 +116,14 @@ var __navigator = null;
class main extends Component{
constructor(props){
super(props);
this.state={value:1,drawer:"close",dy:0};
this.multi = PixelRatio.get();
this.state = {value:1,drawer:"close",offsetY:0};
__navigator = this.props.navigator;
}
componentDidMount(){
this.listener = RCTDeviceEventEmitter.addListener('closeDrawer',()=>{
this._closeDrawer();
});
this.listener2 = RCTDeviceEventEmitter.addListener('scroll',(dy)=>{
console.log(dy);
this.setState({offsetY:dy});
});
}
navigationView(){
return(
Expand All @@ -133,6 +133,11 @@ class main extends Component{
componentWillUnmount(){
//TODO:卸载事件绑定
}
_refresh(dy){
console.log(this._refresh);
// this.prevY = this.state.offsetY;
// this.setState({offsetY:dy * this.multi});
}
_goDownload(){
this.props.navigator.push({
name:"download",
Expand All @@ -149,6 +154,7 @@ class main extends Component{
}
render(){
//TODO:需要改成向上拉就能折叠的抽提效果,但是调用频率实在太低了不能做成连贯的动画
let w = Dimensions.get("window").width * PixelRatio.get();
return(
<DrawerLayoutAndroid
ref={(drawer)=>this._drawer = drawer}
Expand All @@ -157,7 +163,7 @@ class main extends Component{
renderNavigationView={(()=>{return this.navigationView})()}
>
<View style={{flex:1}}>
<View style={{position:"absolute",flex:1,width:360,top:0}}>
<View style={{position:"absolute",flex:1,width:w,top: -this.prevY - this.state.offsetY}}>
<View style={style.header}>
<View style={style.headerLeft}>
<TouchableWithoutFeedback onPress={this._openDrawer.bind(this)}>
Expand Down Expand Up @@ -187,7 +193,7 @@ class main extends Component{
<Selector/>
</View>
<View style={{backgroundColor:"#00bfff",flex:1,position:"relative",top:95}}>
<ViewPager/>
<ViewPager refresh={this}/>
</View>
</View>
</DrawerLayoutAndroid>
Expand Down
7 changes: 4 additions & 3 deletions static/component/main/style.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/**
* Created by zi on 2016/7/23.
*/
import {StyleSheet,Dimensions} from 'react-native';
//noinspection JSUnresolvedVariable
import {StyleSheet,Dimensions,PixelRatio} from 'react-native';

let w = Dimensions.get("window").width;
let w = Dimensions.get("window").width * PixelRatio.get();

module.exports = StyleSheet.create({
top:{
Expand Down Expand Up @@ -46,7 +47,7 @@ module.exports = StyleSheet.create({
face:{
height:31,
width:31,
borderRadius:31
borderRadius:100 //非常的诡异,设置成31的时候,在高分辨率屏幕下不是圆角,所以大一点
},
username:{
fontSize:16,
Expand Down
16 changes: 8 additions & 8 deletions static/component/page/hot/hot.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@ class hot extends Component{
this.prevY = 0;
}
_scroll(evt){
let curY = evt.nativeEvent.pageY;
if(curY > this.prevY){
console.log("down");
}
let curY = evt.nativeEvent.contentOffset.y;
// this.props.refresh._refresh(curY - this.prevY);
let main = this.props.refresh;
console.log(this.props.refresh);
main.setState({offsetY:(curY - this.prevY) * main.multi});
this.prevY = curY;
main.prevY = main.state.offsetY;
}
componentWillMount() {
this._panResponder = PanResponder.create({
Expand All @@ -52,10 +54,8 @@ class hot extends Component{
progressBackgroundColor="#ffffff"
/>
}
onLayout={this._scroll.bind(this)}
onStartShouldSetResponder={()=>true}
onMoveShouldSetResponder={()=>true}
{...this._panResponder.panHandlers}
onScroll={this._scroll.bind(this)}

>
<View style={{height:1000,flex:1}}>
<Swiper style={style.wrapper}
Expand Down
2 changes: 1 addition & 1 deletion static/component/sider/sider.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class sider extends Component{
<View style={style.left}>
<TouchableWithoutFeedback style={style.faceTouch}>
<View style={style.faceBorder}>
<Image resizeMode={Image.resizeMode.contain} source={require('./img/face.jpg')} style={{borderRadius:35,width:70,height:70}}/>
<Image resizeMode={Image.resizeMode.contain} source={require('./img/face.jpg')} style={{borderRadius:70,width:70,height:70}}/>
</View>
</TouchableWithoutFeedback>
<View style={style.user}>
Expand Down
2 changes: 1 addition & 1 deletion static/component/sider/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module.exports = StyleSheet.create({
faceTouch:{
},
faceBorder:{
borderRadius:36,
borderRadius:72,
justifyContent:"center",
width:72,
height:72,
Expand Down
81 changes: 81 additions & 0 deletions static/component/temp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/**
* Created by zi on 2016/7/29.
*/

import React, { Component } from 'react';
//noinspection JSUnresolvedVariable
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
RefreshControl,
PanResponder,
} from 'react-native';

class view extends Component{
render(){
return(
<View style={{backgroundColor:"#000",flex:1}}>
<View style={{backgroundColor:"#ddd",height:100}}>
<Text>566666666666666</Text>
</View>
<ScrollView style={{backgroundColor:"#000",height:570}}
onStartShouldSetResponder={()=>true}
onMoveShouldSetResponder={()=>true}>
<View style={{backgroundColor:"#00bfff",height:1200}}>
<Text>23333333</Text>
</View>
</ScrollView>
</View>
);
}
}

class scroll extends Component{
render(){
return(
<Scrollview style={{backgroundColor:"#000",flex:1}} onSroll={this.props.fn}>
<View style={{backgroundColor:"#ddd",height:100}}>
<Text>566666666666666</Text>
</View>
<ScrollView style={{backgroundColor:"#000",height:570}}
onStartShouldSetResponder={()=>true}
onMoveShouldSetResponder={()=>true}>
<View style={{backgroundColor:"#00bfff",height:1200}}>
<Text>23333333</Text>
</View>
</ScrollView>
</Scrollview>
);
}
}

class hot extends Component{
constructor(props){
super(props);
this.state = {s:true};
}
componentWillMount() {

}
_handle(evt){
let curY = evt.nativeEvent.contentOffset.y;
if(curY == 0){
this.setState({s:false});
}
}
render(){
console.log(this);
return(
<View style={{flex:1}}>
{view
}
</View>
);
}
}


module.exports = hot;

0 comments on commit c39329b

Please sign in to comment.