、たonPressは

Question

動作しないシナリオは次のとおりです。

JS - >のObjective-C - > JS

一般的に、私は中JSコンポーネントを埋め込みたいですネイティブのUIView、およびJSビューは、onPressイベントなどのユーザーインタラクションイベントに応答する必要があります。

詳細：私のJSコンポーネントで 、私はこのようなIOSネイティブと呼ばれる方法：showCategoryPopup（）Objective-Cのメソッドで

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

を、私はUIViewのを作成し、親にサブビューを追加しますUIViewは、サブビューをRCTRootViewクラスを使用して、JSコンポーネントから作成されます。

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

ここCategoryViewPopupは、JSコンポーネントです：

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

ただし、onPressイベントは機能しません。

ありがとうございます！

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