प्रतिक्रियात्मक मूल: देखें

Question

देखें मूल पर, केवल TextInput में onFocus और onBlur ईवेंट श्रोता के लिए ब्लू और ऑन फोकस ईवेंट पर अनुकरण कैसे करें। हालांकि, हम इस प्रभाव को View पर अनुकरण करना चाहते हैं।

यहां हम जो हासिल करने का प्रयास करते हैं, वह यहां है। स्क्रीन पर View है। जब उपयोगकर्ता उस पर टैप करता है और हाइटलाइट होता है तो यह "फोकस" प्राप्त करता है। हम उस उपयोगकर्ता को View के बाहर टैप करना चाहते हैं, ताकि हम View को "धुंधला" कर सकें, यानी, हाइलाइट को हटा दें।

मुझे पता है कि के लिए फ़ोकस का अनुरोध करने के लिए हम focus विधि (https://facebook.github.io/react-native/docs/nativemethodsmixin.html#focus) का उपयोग कर सकते हैं। समस्या यह है कि मुझे नहीं पता कि View के बाहर उस उपयोगकर्ता प्रेस का पता कैसे लगाया जाए।

Answer 1

इस तरह की स्थितियों में, मैं के बाहर मौजूद तत्व के लिए onPress() जोड़ता हूं।

<View onPress(removeHighlight)></View> <View onPress(addHighlight)></View>

Answer 2

मुझे लगता है कि सबसे आसान है ताकि आप के साथ खेल सकते बजाय एक राज्य चर सेट करने के लिए है कि एक जैसे:

class MyView extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeView: null, 
    } 
    this.views = [ 
     (<View style={{ padding: 20 }}><Text>View 1</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 2</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 3</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 4</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 5</Text></View>), 
    ]; 
    } 

    _setActive(index) { 
    return() => { 
     this.setState({ activeView: index }) 
    } 
    } 

    render() { 
    return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 
     {this.views.map((view, index) => { 
     let containerStyle = []; 
     if (index === this.state.activeView) { 
      containerStyle.push({ borderWidth: 10 }) 
     } 
     return (
     <TouchableOpacity onPress={this._setActive(index)} style={containerStyle}> 
      {view} 
     </TouchableOpacity> 
     ); 
     })} 
     </View> 
    ); 
    } 
} 

आप MyView उपयोग कर सकते हैं जहां <MyView /> भी पर हर आइटम के रूप में requried सरणी views में कोई शैली आवश्यक हो सकती है और अगर प्रत्येक this.state.activeView तक पहुंच से सक्रिय है तो उसे कॉन्फ़िगर करें।

यदि आपके कोई प्रश्न हैं तो मुझे बताएं।