के अंदर प्रेस समस्याओं पर टच करने योग्य अस्पष्टता मैं मूल निवासी 0.24.1 चला रहा हूं और <ScrollView> के अंदर स्थित होने पर मुझे <TouchableOpacity> घटक के साथ कोई समस्या आ रही है।प्रतिक्रिया मूल: ScrollView
इसकी प्रेस घटनाओं पर आग लगती है लेकिन जब कोई ऐसा नहीं होता है तो एक विशेष मामला होता है। यदि <TouchableOpacity> घटक के साथ आपके पास <TextInput> है, और वर्तमान फ़ोकस <TextInput> बॉक्स पर है, तो आप <TouchableOpacity> पर क्लिक कर सकते हैं और आप पर ईवेंट को निकाल नहीं पाएंगे।
कम से कम पहली बार आप इसे करते हैं। एक बार फोकस <TextInput> पर नहीं है, तो अब आप <TouchableOpacity> घटक पर दबा सकते हैं और पर ईवेंट ठीक से ठीक हो जाएगा।
ध्यान दें कि घटक के अंदर के बजाय रखा गया है, सब कुछ अपेक्षित काम करता है और उपर्युक्त समस्या लागू नहीं होती है।
const React = require('react-native');
const {
Component,
Dimensions,
View,
ScrollView,
Text,
TextInput,
TouchableOpacity,
} = React;
// ----------------------------------------------------------------------------
class TouchableOpacityTest extends Component {
constructor(props, context) {
super(props, context);
this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0};
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
onPressEvent(what,e) {
console.log('what:',what);
let newState = {};
newState['count_'+what] = ++this.state['count_'+what];
this.setState(newState);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
render() {
let touchableProps = {
onPress: this.onPressEvent.bind(this,'onPress'),
onPressIn: this.onPressEvent.bind(this,'onPressIn'),
onPressOut: this.onPressEvent.bind(this,'onPressOut'),
onLongPress: this.onPressEvent.bind(this,'onLongPress'),
}
return (
<View style={{flex:1,flexDirection:'column',justifyContent:'flex-start',alignItems:'center',backgroundColor:'blue'}} >
<ScrollView style={{width:Dimensions.get('window').width*0.9,backgroundColor:'red'}}>
<TextInput style={{backgroundColor:'rgb(200,200,200)',marginTop:14}}
placeholder="Focus on me,hide keyboard,and click on text below"
autoCorrect={false}
/>
<TouchableOpacity {...touchableProps} >
<Text style={{fontSize:20,backgroundColor:'pink',marginTop:14}}>
Click on me!{"\n"}
onPress:{this.state.count_onPress}{"\n"}
onPressIn:{this.state.count_onPressIn}{"\n"}
onPressOut:{this.state.count_onPressOut}{"\n"}
onLongPress:{this.state.count_onLongPress}{"\n"}
</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
// ----------------------------------------------------------------------------
AppRegistry.registerComponent('react_native_app1',() => TouchableOpacityTest);
आप उपरोक्त कोड पर एक <View> घटक के साथ <ScrollView> की जगह ले सकती है और आप उस onPress घटना आग हर बार देखेंगे, तब भी जब फोकस:
यहाँ समस्या प्रदर्शित करने के लिए कुछ कोड है मैं Android पर काम कर रहा हूँ: <TextView>
नोट पर है। मुझे नहीं पता कि यह आईओएस पर भी होता है।
नोट 2: आकाश Sigdel के अनुसार, यह वास्तव में बहुत iOS पर हो रहा है।
{ 'कोई नहीं', 'ondrag', 'इंटरैक्टिव'} keyboardDismissMode = में से एक का उपयोग करके देखें – Mihir
मैं इसे iOS पर जाँच की और पुष्टि कर सकते हैं कि यह भी आईओएस में होता है। –
मुझे स्क्रॉलव्यू के बगल में के साथ एक ही समस्या थी, लेकिन स्क्रॉलव्यू को हटाते समय समस्या ठीक नहीं हुई थी। इसके बजाए, मैंने अपने बटन का आकार 44x44 के न्यूनतम अनुशंसित आकार में बढ़ा दिया। उसके बाद, बटन ने सभी टैप घटनाओं को पहचाना। की –