Enthüllung von Fragmenten in React Native Android ViewManager

Question

Ich versuche, die YouTube Android API als UI-Komponente für React Native zu verpacken. Ich war erfolgreich in der Android-Konfiguration der Dinge (onInInitializationSuccess bekommen), aber ich bin nicht in der Lage, herauszufinden, wie die YouTubePlayerView zurück zu meiner React Native App bekommen.

Laut der Dokumentation empfehlen sie die Verwendung von YouTubePlayerFragment, wenn YouTubeBaseActivity nicht erweitert werden kann. Da React Native auf Android keine XML-basierten Layouts verwendet, habe ich versucht, die Ansichten programmgesteuert zu erstellen. Wenn ich jedoch die Wrapping-Ansicht zurückgebe (ich habe es als FrameLayout versucht, bin mir aber nicht sicher, ob das die richtige Wahl war), habe ich erstellt, dass nichts in der Anwendung wiedergegeben wird.

Ich suche jetzt ist es extrem einfach zu halten, sind hier die notwendigen Bit-Code:

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

Jede Hilfe würde wirklich geschätzt werden, danke!

Answer 1

Ich habe keine tatsächliche Lösung für das YouTube-Fragment, aber ich habe einige Workarounds für die Anzeige einer YouTube-Ansicht in RN verwendet.

(Vielleicht können Sie den Hack in 3. auf dem Fragment zuerst versuchen.)

1. Machen Sie Ihre eigenen ReactActivity die YouTubeBaseActivity und lassen MainActivity erstreckt sie sich erstreckt.

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

2. Make YoutubeManager Klasse für die YouTubePlayerView.

   Es sollte eine Activity Instanz von createViewManagers Instanz verwendet werden, wenn Sie ReactPackage implementieren.

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

   und ein js-Modul dafür machen.

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

3. Jetzt können Sie eine YouTube-Ansicht anzeigen, aber es scheint wie leere Ansicht. Du brauchst einen Hack dafür.

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

können Sie sehen, wie es eigentlich von meiner App funktioniert.

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