react native Clipboard复制粘贴
范修伟
React Native 版本执行0.57的规则
Clipboard应用，以及复制成功提示的特殊处理
import React, { Component } from 'react';
import { StyleSheet, Text, View, Clipboard, ScrollView, Image, ImageBackground, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { requestUrl } from '../../network/Url';// 请求url
import Fetch from '../../network/Fetch';
import Px2dp from '../../utils/Px2dp';
import Colors from '../../utils/Colors';
import Loading from '../../components/Loading'; // 加载层
import * as Public from '../../utils/Public';
export default class MyRedeemCode extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
list: [], //未兑换数据
onList: [], //已兑换数据
}
}
componentDidMount() {
this._getRedeemCode() //获取用户兑换码
}
render() {
const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<StatusBar
animated={true}//是否动画
hidden={false}//是否隐藏
backgroundColor={'#000'}//android 设置状态栏背景颜色
translucent={false}//android 设置状态栏是否为透明
showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
statusBarStyle={"default"}//状态栏样式 default 默认（IOS为白底黑字、Android为黑底白字）
barStyle={"default"}// 状态栏文本的颜色。
/>
<Nav title={"兑换码"} leftClick={() => { goBack() }} />
<ScrollView style={{ paddingTop: Px2dp(20) }}>
{/* 未兑换 */}
{
this.state.list.map((item, index) => {
return (
<ImageBackground key={index} style={styles.commonCode} source={require("../../images/discount_on.png")}>
<View style={styles.moneyBox}>
<Text style={styles.money}>¥<Text>{item.price}</Text></Text>
<Text style={styles.moneyTxt}>满{item.full_cut}元可用</Text>
</View>
<View style={styles.detailInfo}>
<Text style={styles.detailInfoTit}>{item.id}</Text>
<Text numberOfLines={2} style={styles.detailInfoTxt}>详细说明：{item.remarks}</Text>
<Text style={styles.detailInfoDate}>有效期：{item.create_date}-{this.addDate(item.create_date, item.days)}</Text>
</View>
<TouchableOpacity activeOpacity={0.8} style={styles.btnBox} onPress={() => {
this._setClipboard(item.id)
}}>
<Text style={styles.btnTxt}>点击复制</Text>
</TouchableOpacity>
</ImageBackground>
)
})
}
{/* 已兑换 */}
{
this.state.onList.map((item, index) => {
return (
<ImageBackground key={index} style={styles.commonCode} source={require("../../images/discount_off.png")}>
<View style={styles.moneyBox}>
<Text style={styles.money}>¥<Text>{item.price}</Text></Text>
<Text style={styles.moneyTxt}>满{item.full_cut}元可用</Text>
</View>
<View style={styles.detailInfo}>
<Text style={styles.detailInfoTit}>{item.id}</Text>
<Text numberOfLines={2} style={styles.detailInfoTxt}>详细说明：{item.remarks}</Text>
<Text style={styles.detailInfoDate}>有效期：{item.create_date}-{this.addDate(item.create_date, item.days)}</Text>
</View>
<TouchableOpacity activeOpacity={0.8} style={styles.btnBox}>
<Text style={styles.btnTxt}>已兑换</Text>
</TouchableOpacity>
</ImageBackground>
)
})
}
{/* 无数据 */}
{
this.state.list.length <= 0 && this.state.onList.length <= 0 ?
<View style={{ justifyContent: 'center', alignItems: 'center', height: SCREEN_HEIGHT*0.8, backgroundColor: Colors.whiteBg }}>
<Image style={{ marginTop: Px2dp(-100) }} source={require('../../images/Redeem.png')}></Image>
<Text style={{ marginTop: Px2dp(30), fontSize: Px2dp(14), color: Colors.text999 }}> 店主可以将兑换码给新用户，促进下单</Text>
</View> : null
}
</ScrollView>
{/* 加载loading */}
{this.state.isLoading ? <Loading /> : null}
</View>
);
}
//获取用户兑换码
_getRedeemCode() {
this.setState({
isLoading: true,
})
Fetch(requestUrl, {
"userId": .id
}).then(data => {
if (data.status == "SUCCESS") {
this.setState({
isLoading: false,
list: data.data.list,
onList: data.data.onList
})
console.log(data)
} else if (data.status == "ERROR") {
this.setState({
isLoading: false,
})
ToastShow({ "text": '获取用户兑换码失败' })
} else if (data.status == "2") {
this.setState({
isLoading: false,
list: [],
onList: []
})
} else {
this.setState({
isLoading: false,
})
}
})
}
//操作粘贴板
_setClipboard(data) {
//清空粘贴板
Clipboard.setString(null)
//设置粘贴板文案
Clipboard.setString(data)
//获取粘贴板文案
Clipboard.getString().then(oldVal => {
if (oldVal == data) {
ToastShow({ "text": "复制成功" })
}
})
}
//获取截止日期
addDate(date, days) {
if (days == undefined || days == '') {
days = 1;
}
var date = new Date(date);
date.setDate(date.getDate() + days);
var month = date.getMonth() + 1;
var day = date.getDate();
month = Public.doubleZero(month)
day = Public.doubleZero(day)
var time = date.getFullYear() + "-" + month + "-" + day
return time;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.white,
},
commonCode: {
width: Px2dp(343),
height: Px2dp(116),
flexDirection: 'row',
marginLeft: Px2dp(16),
justifyContent: 'space-between',
marginBottom: Px2dp(20)
},
moneyBox: {
justifyContent: "center",
marginLeft: Px2dp(12),
alignItems: "center",
flex: 1,
},
money: {
fontSize: Px2dp(20),
color: Colors.red,
lineHeight: Px2dp(28)
},
moneyTxt: {
fontSize: Px2dp(13),
color: Colors.text666,
lineHeight: Px2dp(18),
marginTop: Px2dp(3)
},
detailInfo: {
justifyContent: "center",
marginLeft: Px2dp(27)
},
detailInfoTit: {
fontSize: Px2dp(18),
color: Colors.text333,
lineHeight: Px2dp(25)
},
detailInfoTxt: {
fontSize: Px2dp(12),
color: Colors.text999,
lineHeight: Px2dp(17),
marginTop: Px2dp(10),
width: Px2dp(164)
},
detailInfoDate: {
fontSize: Px2dp(11),
color: Colors.text999,
lineHeight: Px2dp(16),
marginTop: Px2dp(6)
},
btnBox: {
paddingLeft: Px2dp(19),
paddingRight: Px2dp(12),
alignItems:"center",
justifyContent:"center"
},
btnTxt: {
fontSize: Px2dp(15),
color: Colors.white,
width: Px2dp(16),
lineHeight: Px2dp(21),
}
});
类似资料：