रिएक्ट नेटिव एंड्रॉइड व्यूमेनर

Question

में फ्रैगमेंट का खुलासा करना मैं यूट्यूब एंड्रॉइड एपीआई को रिएक्ट नेटिव के लिए यूआई घटक के रूप में लपेटने का प्रयास कर रहा हूं। मैं चीजों की एंड्रॉइड कॉन्फ़िगरेशन में सफल रहा हूं (ऑनइलाइजेशन सिक्योरिंग प्राप्त करना), हालांकि मैं यह समझने में असमर्थ हूं कि YouTubePlayer को मेरे रिएक्ट नेटिव ऐप पर वापस कैसे प्राप्त करें।

दस्तावेज़ों के मुताबिक, यदि आप YouTubeBaseActivity का विस्तार नहीं कर सकते हैं तो वे YouTubePlayerFragment का उपयोग करने की सलाह देते हैं। चूंकि एंड्रॉइड पर रिएक्ट नेटिव एक्सएमएल आधारित लेआउट का उपयोग नहीं करता है, मैंने प्रोग्रामेटिक रूप से विचार बनाने का प्रयास किया है। हालांकि, जब मैं रैपिंग व्यू लौटाता हूं (मैंने फ़्रेमलाउट के रूप में प्रयास किया है, लेकिन यह सुनिश्चित नहीं है कि यह सही विकल्प है) मैंने बनाया है कि यह एप्लिकेशन पर कुछ भी प्रस्तुत नहीं करता है।

मैं इसे अभी के लिए अत्यंत सरल रखने के लिए देख रहा हूँ, यहाँ कोड के लिए आवश्यक बिट्स हैं:

YouTubeManager.java

public class YouTubeManager extends SimpleViewManager<FrameLayout> implements YouTubePlayer.OnInitializedListener { 
// ... 
@Override 
    protected FrameLayout createViewInstance(ThemedReactContext reactContext) { 
     this.reactContext = reactContext; 

     FrameLayout view = new FrameLayout(reactContext); 
     view.setId(View.generateViewId()); 


     FragmentManager fragmentManager = activity.getFragmentManager(); 
     FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); 

     YouTubePlayerFragment fragment = new YouTubePlayerFragment(); 
     fragmentTransaction.add(view.getId(), fragment); 

     fragmentTransaction.commit(); 

     fragment.initialize("SECRET_KEY", this); 

     return view; 
    } 
// ... 
} 

YouTube.js

class YouTube extends Component { 
    render() { 
     return <YouTubeAndroid {...this.props}/>; 
    } 
}; 

var iface = { 
    name : 'YouTube', 
    propTypes : { 
     ...View.propTypes 
    }, 
}; 


var YouTubeAndroid = requireNativeComponent('YouTube', iface); 

module.exports = YouTube; 

index.android.js

var YouTube = require('./YouTube'); 

class YouTubePlayer extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text>hello</Text> 
     <YouTube /> 
     </View> 
    ); 
    } 
} 

किसी भी मदद की वास्तव में सराहना की जाएगी, धन्यवाद!

Answer 1

मेरे पास YouTube खंड के लिए वास्तविक समाधान नहीं है, लेकिन मैंने आरएन में YouTube दृश्य प्रदर्शित करने के लिए कुछ कामकाज का उपयोग किया।

(हो सकता है कि आप पहली बार अपने टुकड़ा पर 3. में हैक करने की कोशिश कर सकते हैं।)

1. बनाओ अपनी खुद की ReactActivity कि YouTubeBaseActivity प्रदान करता है और MainActivity यह फैली हुई हैं।

   public abstract class ReactActivity extends YouTubeBaseActivity implements DefaultHardwareBackBtnHandler { 
       // copy & paste RN's ReactActivity.java source 
   

2. YouTubePlayerView के लिए YoutubeManager वर्ग बनाओ।

   से Activity उदाहरण लेना चाहिए जब आप ReactPackage लागू करते हैं।

   public class YoutubeManager extends SimpleViewManager<YouTubePlayerView> implements YouTubePlayer.OnInitializedListener, YouTubePlayer.PlayerStateChangeListener, YouTubePlayer.PlaybackEventListener { 
   
       public static final String REACT_CLASS = "RCTYoutube"; 
       private static final String YOUTUBE_API_KEY = "<YOUR_OWN_KEY>"; 
   
       private YouTubeBaseActivity mActivity = null; 
       private YouTubePlayerView mYouTubePlayerView = null; 
   
       public YoutubeManager(Activity activity) { 
       super(); 
       mActivity = (YouTubeBaseActivity) activity; 
       } 
   
       @Override 
       public String getName() { 
       return REACT_CLASS; 
       } 
   
       @Override 
       public YouTubePlayerView createViewInstance(ThemedReactContext context) { 
       mContext = context; 
   
       mYouTubePlayerView = new YouTubePlayerView(mActivity); 
       mYouTubePlayerView.initialize(YOUTUBE_API_KEY, this); 
   
       return mYouTubePlayerView; 
       } 
   

   और इसके लिए जेएस मॉड्यूल बनाएं।

   module.exports = requireNativeComponent('RCTYoutube', iface); 
   

3. अब आप एक YouTube दृश्य प्रदर्शित कर सकते हैं, लेकिन यह खाली दृश्य जैसा लगता है। इसके लिए आपको कुछ हैक चाहिए।

   componentDidMount() { 
       this.setState({ 
       width: this.props.style.width, 
       height: this.props.style.height - 1 
       }) 
       this.timer = setInterval(()=>{ 
       this.setState({ 
        width: this.props.style.width, 
        height: this.props.style.height + Math.floor(Math.random() * 2) 
       }) 
       }, 500) 
   } 
   
   render() { 
       return (<YoutubeView style={[style, { width: this.state.width, height: this.state.height }]} />) 
   } 
   
   componentWillUnmount() { 
       if(this.timer) clearTimeout(this.timer); 
   } 
   

आप देख सकते हैं कि यह मेरे app से वास्तव में काम करता है।

https://play.google.com/store/apps/details?id=kr.dobbit.sharehows