react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????
问题描述:
react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????
答
写了个非常简陋的东西,有很大的问题,因为uri是绑定的state,所以就会刷新,导致滑动的时候闪屏,就想用refs和setNativeProps来改变...但是我太菜了,还在想...哪位好心大哥帮忙改进一下吧
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import {
Platform, StyleSheet, Text, View, Image, TouchableHighlight, AppRegistry,
PanResponder,
} from 'react-native';
import img_arr from './img_arr';
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',
});
var x = 0;
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
T_img:1,
T_end:0,
T_start:0,
};
this.lastX = this.state.marginLeft;
this.lastY = this.state.marginTop;
}
componentWillMount() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
return true;
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
return true;
},
onPanResponderGrant: (evt, gestureState) => {
// this._highlight();
console.log(evt, gestureState,"onPanResponderGrant",this.refs.myImage)
},
onPanResponderMove: (evt, gestureState) => {
console.log(parseInt(gestureState.dx/24),this.state.T_img);
//1 判断是左滑还是右滑
if(gestureState.dx>0) {
//右滑
if(parseInt(gestureState.dx/24)+this.state.T_end == 59){
this.setState({
T_start:parseInt(gestureState.dx/24)
})
}
this.setState({
T_img:parseInt(gestureState.dx/24)+this.state.T_img > 59 ? parseInt(gestureState.dx/24) - this.state.T_start :parseInt(gestureState.dx/24)+this.state.T_img
})
console.log(this.refs.myImage.setNativeProps)
// 目前考虑用refs setNativeProps dom操作 来改变uri 但是我这样写 实现不了...唉
// this.refs.myImage.setNativeProps({
// source:{
// uri:parseInt(gestureState.dx/24)+this.state.T_img > 59 ? parseInt(gestureState.dx/24) - this.state.T_start :parseInt(gestureState.dx/24)+this.state.T_img
// }
// });
}else {
//左滑
if(Math.abs(parseInt(gestureState.dx/24))+this.state.T_end == 59){
this.setState({
T_start:Math.abs(parseInt(gestureState.dx/24))
})
}
this.setState({
T_img:Math.abs(parseInt(gestureState.dx/24))+this.state.T_img > 59 ? Math.abs(parseInt(gestureState.dx/24)) - this.state.T_start :Math.abs(parseInt(gestureState.dx/24))+this.state.T_img
})
}
},
onPanResponderRelease: (evt, gestureState) => {
console.log(this.state.T_img,"onPanResponderRelease",parseInt(gestureState.dx/24))
//右滑
this.setState({
T_img:this.state.T_img,
T_end:this.state.T_img,
T_start:0
})
},
onPanResponderTerminate: (evt, gestureState) => {
console.log(this.state.T_img,"onPanResponderTerminate")
},
});
}
_unhighlight() {
this.setState({
backgroundColor: 'red',
});
}
_highlight() {
this.setState({
backgroundColor: 'blue',
});
}
render() {
return (
<View
style={styles.container}
>
<Image
ref="myImage"
{...this._panResponder.panHandlers}
source={img_arr['png'+this.state.T_img]}
/>
</View >
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});