Esporre frammento in React Native Android ViewManager

Question

Sto tentando di avvolgere l'API Android di YouTube come componente dell'interfaccia utente per React Native. Ho avuto successo nella configurazione delle cose su Android (ottenendoInitializationSuccess), tuttavia non sono in grado di capire come riportare YouTubePlayerView alla mia app React Native.

In base ai documenti, è consigliabile utilizzare YouTubePlayerFragment se non è possibile estendere YouTubeBaseActivity. Poiché React Native su Android non utilizza layout basati su XML, ho tentato di creare le viste a livello di programmazione. Tuttavia, quando restituisco la vista di avvolgimento (ho provato come FrameLayout, ma non sono sicuro che quella fosse la scelta giusta), l'ho creata non rende nulla sull'applicazione.

Sto cercando di tenerlo estremamente semplice per ora, qui ci sono i bit necessari di codice:

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

Qualsiasi aiuto sarebbe davvero apprezzato, grazie!

Answer 1

Non ho una soluzione reale per il frammento di YouTube, ma ho usato qualche soluzione alternativa per visualizzare una visualizzazione di YouTube in RN.

(Forse si può provare l'hack in 3. sul frammento di prima.)

1. Crea la tua ReactActivity che si estende YouTubeBaseActivity e lasciare MainActivity estende.

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

2. Fai YoutubeManager classe per il YouTubePlayerView.

   È necessario un istanza Activity da createViewManagers quando si implementa 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; 
       } 
   

   e creare un modulo js per esso.

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

3. Ora è possibile ottenere una visualizzazione di YouTube, ma sembra che vista vuoto. Hai bisogno di qualche trucco per questo.

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

Si può vedere come funziona in realtà dalla mia app.

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