odsyłam do article by Yevgen Safronov
w nim pisze
Oczywiście najtrudniejszym elementem aplikacji obsługuje żywo strumień wideo, ponieważ wymaga przełączania Stream wideo jakości w oparciu o dostępne Przepustowość Internetu. Najpierw jednak potrzebowałem natywnego komponentu RN do pokazania dowolnego strumienia wideo. Istnieje jest popularnym komponentem wideo dla RN, ale obsługuje tylko iOS. I postanowiłem napisać własną wrapper składową RN wokół odtwarzacza Vitamio. To jest dobrze znanym projektem open-source i ma wsparcie dla protokołu RTMP, którego używamy w aplikacji mobilnej na numer .
Nie miałem wcześniejszego doświadczenia z pisaniem natywnych składników RN, więc poszedłem bezpośrednio do dokumentacji RN, jak ją utworzyć. Przewodnik, który nazywam nazywa się Natywnymi składnikami interfejsu użytkownika, jest podobny do iOS. Nie kilka istotnych części deklarować:
Wdrożenie zwyczaj ViewManager (część Android)
zarejestrować ViewManager (część Android)
wdrożyć moduł JavaScript
zarejestrować moduł (część Android)
wdrożyć niestandardowe ViewManager Odwołując się do przykładu deklarując VideoView dla Vitamio to jak istota deklaracji VideoView wygląda następująco:
public class VideoViewDemo extends Activity {
@Override public void onCreate(Bundle icicle) {
super.onCreate(icicle);
if (!LibsChecker.checkVitamioLibs(this))
return;
setContentView(R.layout.videoview);
mEditText = (EditText) findViewById(R.id.url);
mVideoView = (VideoView) findViewById(R.id.surface_view);
if (path == "") { return; }
mVideoView.setVideoPath(path);
mVideoView.setMediaController(new MediaController(this));
mVideoView.requestFocus();
}
...
}
Kod wygląda dość prosto. Poza przekazaniem referencji do Activity do LibsChecker, VideoView wymaga ścieżki do strumienia wideo i instancji MediaController.
public class VitamioViewManager extends SimpleViewManager<VideoView>{
public static final String REACT_CLASS = “RCTVitamioView”;
@Override
public String getName() {
return REACT_CLASS;
}
wystawiać setStreamUrl setter użyciu ReactProp:
@ReactProp(name = "streamUrl")
public void setStreamUrl(VideoView view, @Nullable String streamUrl) {
if (!LibsChecker.checkVitamioLibs(mActivity))
return;
view.setVideoPath(streamUrl);
view.setMediaController(new MediaController(mContext));
view.requestFocus();
}
dodać realizację createViewInstance:
private ThemedReactContext mContext = null;
private Activity mActivity = null;
@Override
public VideoView createViewInstance(ThemedReactContext context){
mContext = context;
return new VideoView(context);
}
One note about the code. Because LibsChecker requires an instance of Activity we will receive it via constructor, it will reference root activity used for RN application;
public VitamioViewManager(Activity activity) {
mActivity = activity;
}
Zarejestruj ViewManager Ostatnim krokiem Java jest zarejestrowanie ViewManager do wniosku, dzieje się to za pośrednictwem funkcji członka pakietu aplikacji createViewManagers: ...
public class VitamioViewPackage implements ReactPackage {
private Activity mActivity = null;
public VitamioViewPackage(Activity activity) {
mActivity = activity;
}
@Override
public List<NativeModule>
createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager>
createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new VitamioViewManager(mActivity)
);
}
}
Wdrożenie modułu JavaScript, aby odsłonić niestandardowy składnik UI w JavaScript konieczne jest zadzwonić zachodzą specyficzne requireNativeComponent funkcję:
var { requireNativeComponent, PropTypes } = require('react-native');
var iface = {
name: 'VideoView',
propTypes: {
streamUrl: PropTypes.string
}
};
module.exports = requireNativeComponent('RCTVitamioView', iface);
zarejestrować moduł Chociaż nie jest wymieniony jako wymagany krok w oficjalnej dokumentacji potrzebujemy go ze względu na odniesienie do działania root: : package com.vitamio_demo;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.List;
import com.sejoker.VitamView.VitamioViewPackage; // <--- import
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "vitamio_demo";
}
/**
* Returns whether dev mode should be enabled.
* This enables e.g. the dev menu.
*/
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VitamioViewPackage(this) // <------ add here
);
}
}
Przykład użycia zainstalować pakiet w projekcie:
npm i react-native-android-vitamio --save
DeclareVideoView:
var VitamioView = require('react-native-android-vitamio');
class VideoScreen extends React.Component {
render() {
return (
<View>
<VitamioView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn.net/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>
</View>
);
}
}
var styles = StyleSheet.create({
video: {
flex: 1,
flexDirection: 'row',
height: 400,
}
})
module.exports = VideoScreen;
Mam nadzieję, że to pomoże, lista jego własnych odniesień podana jest w artykule.
próbowałeś tej wtyczki https://github.com/brentvatne/react-native-video – diedu
Tak, to jest nieco inny niż to, co szukam. Chcę wyświetlać link do strony internetowej i odtwarzacz wideo online w widoku internetowym, aby móc korzystać z odtwarzacza internetowego i wszystkich funkcji, które w nim wbudowano (wycofać 30 sekund, cały ekran itp.). React-native-video jest po prostu komponentem, który pozwala na odtwarzanie wideo, ale wymaga od mnie bezpośredniego połączenia ze źródłem, a także odtworzenia całego interfejsu użytkownika odtwarzacza. Mogę w końcu to zrobić, jeśli nie mogę tego rozwiązać. W każdym razie dzięki! – AndrewTet
czy masz vsn .27? obsługuje Androida. http://facebook.github.io/react-native/ –