react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????
1条回答 默认 最新
- 陈小洋 2019-04-22 15:07关注
写了个非常简陋的东西,有很大的问题,因为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, }, });
解决 无用评论 打赏 举报
悬赏问题
- ¥15 #MATLAB仿真#车辆换道路径规划
- ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
- ¥15 数据可视化Python
- ¥15 要给毕业设计添加扫码登录的功能!!有偿
- ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
- ¥15 微信公众号自制会员卡没有收款渠道啊
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条
- ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘