React Native: So simulieren onBlur und onFocus-Ereignis für View

Question

In React Native hat nur TextInputonFocus und onBlur Event-Listener. Wir möchten diesen Effekt jedoch auf eine View simulieren.

Hier ist, was wir versuchen zu erreichen. Es ist ein View auf dem Bildschirm. Es erhält "Fokus", wenn der Benutzer darauf tippt und hervorgehoben wird. Wir möchten erkennen, dass der Benutzer außerhalb der View tippt, so dass wir die View "verwischen" können, das heißt, entfernen Sie die Hervorhebung.

Ich weiß, dass wir focus Methode verwenden (https://facebook.github.io/react-native/docs/nativemethodsmixin.html#focus) Fokus für die View zu beantragen. Das Problem ist, dass ich nicht weiß, wie man erkennt, dass Benutzer außerhalb der View drückt.

Answer 1

In solchen Situationen füge ich onPress() zu dem Element hinzu, das außerhalb der View in Frage ist.

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

Answer 2

Ich denke, die einfachste, anstatt eine Zustandsgröße eingestellt ist, so dass Sie mit, dass man wie spielen kann:

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> 
    ); 
    } 
} 

Sie MyView wo als <MyView /> auf der jedes Element auch requried verwenden können Array views kann jeden erforderlichen Stil haben und jedes konfigurieren, wenn nur der Zugriff auf this.state.activeView aktiv ist.

Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.