Wenn eine JS-Komponente in nativer UIView macht, wird die onPress nicht

Question

arbeitet

Das Szenario ist:

JS -> Objective-C -> JS

Im Allgemeinen möchte ich eine JS-Komponente in einem einzubetten native UIView, und die JS-Ansicht sollte auf Benutzerinteraktionsereignisse wie onPress-Ereignis reagieren.

Details: In meinem JS Komponente, rief ich die IOS native Methode wie folgt aus:

var CategoryManager = NativeModules.CategoryManager; 
CategoryManager.showCategoryPopup(); 

im showCategoryPopup() Objective-C-Methode, erstelle ich eine uiview und ein Subview der Mutter hinzufügen uiview wird die Subview von der JS-Komponente mit der RCTRootView Klasse erstellt:

UIView *parentView = [UIView new]; 
RCTRootView *subview_1 = [[RCTRootView alloc] initWithBridge:[[RCCManager sharedIntance] getBridge] moduleName:@"CategoryViewPopup" initialProperties:nil]; 
[parentView addSubview: subview_1]; 

hier die CategoryViewPopup ist eine JS-Komponente:

export default class CategoryViewPopup extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     textToggle: false, 
    }; 
    } 

    render() { 
    return (
     <TouchableOpacity onPress={this.toggleText.bind(this)}> 
     <View style={{width: 100, height: 100, backgroundColor: 'red'}}> 
      <Text>{this.state.textToggle ? "Text 1" : "Text 2"}</Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 

    toggleText() { 
    this.setState({ 
     textToggle: !this.state.textToggle, 
    }); 
    } 
} 

Aber das Ereignis onPress funktioniert nicht.

Danke!

Answer 1

export default class CategoryViewPopup extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     textToggle: false, 
    }; 
    } 

    render() { 
    return (
     <View style = {styles.container}> 
     <TouchableOpacity onPress={this.toggleText.bind(this)}> 
     <View style={{width: 100, height: 100, backgroundColor: 'red'}}> 
      <Text>{this.state.textToggle ? "Text 1" : "Text 2"}</Text> 
     </View> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 

    toggleText() { 
    this.setState({ 
     textToggle: !this.state.textToggle, 
    }); 
    } 
} 

const styles = StyleSheet.create({ 
    container : { 
    flex : 1, 
    backgroundColor : 'rgba(244,244,244,0.9)', 
    justifyContent : 'center', 
    alignItems : 'center' 
    } 
});