react native 手势响应
参考地址：https://www.jianshu.com/p/935e5c6a5064
官方文档地址：https://facebook.github.io/react-native/docs/panresponder.html
官方翻译地址：https://reactnative.cn/docs/0.50/panresponder.html
首先，通过react native引入PanResponder
import {PanResponder} from 'react-native';
//这里是当移动了超过20，才会进行隐藏或是显示
_panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
console.log('开始移动：');
this.setState({ moveBG: '#eeeeee' })
},
onPanResponderMove: (evt, gs) => {
console.log('正在移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);
},
onPanResponderRelease: (evt, gs) => {
console.log('结束移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);
this.setState({
moveBG: '#FFF'
});
if (gs.dy > 20) {
this.setState({
IsShowOrderInfoFlag: true
})
} else if (gs.dy < -20) {
this.setState({
IsShowOrderInfoFlag: false
})
}
}
});
以上为声明手势响应，将手势响应方法放入至某一个View中
Render方法中<View style={styles.container}>
{
this.state.IsShowOrderInfoFlag ?
<View style={[styles.headerView, { backgroundColor: '#e0e0e0' }]}>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.zdCode_Text')}{this.props.bundleEntity.bundleInfo.zdCode}</Text>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.Customer_Text')}{this.props.bundleEntity.bundleInfo.custName}|{this.props.bundleEntity.bundleInfo.custCode}</Text>
<Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Bundle.Bundle_Text')}{this.props.bundleEntity.bundleInfo.bundle.groupNo}</Text>
</View>
:
null
}
<View style={[styles.headerView, { backgroundColor: this.state.moveBG }]} {...this._panResponder.panHandlers}>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Text')}</Text>
<TextInput style={styles.qaCommentText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Placeholder')}
maxLength={10000}
multiline={true}
returnKeyType='done'
onChangeText={(text) => {
let oldHandmadeCheckData = this.state.HandmadeCheckData;
oldHandmadeCheckData.QAComment = text;
this.setState({ HandmadeCheckData: oldHandmadeCheckData })
}}
value={this.state.HandmadeCheckData.QAComment}
/>
<Button onPress={() => {
this._removeQAComment();
}}>
<Icon style={styles.removeQACommentIcon} name="remove" size={32} />
</Button>
<Button onPress={() => {
this.refs.qaCommentModal.showQACommentModal(this.props.handmadeCheckEntity.AllQACommentList, this);
}}>
<Icon style={styles.qaCommentIcon} name="comment" size={32} />
</Button>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Text')}</Text>
<TextInput style={styles.EditText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Placeholder')}
editable={true}
keyboardType='numeric'
returnKeyType='done'
value={this.state.PassProductCount}
onBlur={() => {
this.props.onSetPassProduct(this.state.PassProductCount)
}}
onChangeText={(text) => {
this.setState({ PassProductCount: text })
}}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Text')}</Text>
<TextInput style={styles.EditText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Placeholder')}
editable={true}
keyboardType='numeric'
returnKeyType='done'
value={this.state.CanNotReworkProductCount}
onBlur={() => {
this.props.onSetCannotReworkProduct(this.state.CanNotReworkProductCount)
}}
onChangeText={(text) => {
this.setState({ CanNotReworkProductCount: text })
}}
/>
</View>
{
this.state.IsShowOrderInfoFlag ?
<View style={styles.headerView}>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.HandmadeCheckData.CheckTime}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.RequestCheckCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.IssueProductCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.HandmadeIssueProductCount}
/>
<Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Text')}</Text>
<TextInput style={styles.checkTimeText}
placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Placeholder')}
editable={false}
keyboardType='numeric'
returnKeyType='done'
value={this.state.NonHandmadeIssueProductCount}
/>
</View>
: null
}
效果
以上是 react native 手势响应 的全部内容， 来源链接： utcz.com/z/381963.html
