Как правильно расположить React Native Fire TV SubtitleView?
Я работаю над реализацией проигрывателя Bitmovin на React Native, используя их Android SDK. На данном этапе я не уверен, насколько это конкретно для игрока Bitmovin, но, поскольку они официально не поддерживают React Native на данном этапе, я хочу сначала спросить об этом на SO. Это компонент пользовательского интерфейса React Native с настраиваемым представлением, использующим файл макета. Я пытаюсь представить представление субтитров поверх представления проигрывателя, и я основал свой макет на простых примерах Bitmovin. Фактически, я еще больше упростил макет:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.bitmovin.player.PlayerView
android:id="@+id/bitmovinPlayerView"
app:shutter_background_color="@android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bootsplash_background">
<com.bitmovin.player.SubtitleView
android:id="@+id/bitmovinSubtitleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foregroundGravity="center" />
</com.bitmovin.player.PlayerView>
</LinearLayout>
Это представляет SubtitleView вверху экрана. Ничего из того, что я пробовал до сих пор, не представляет SubtitleView в нижней части экрана в более обычном положении. Насколько я могу судить, я экспериментировал с каждым параметром всех этих элементов. Вот код, который инициализирует представление:
public void init() {
inflate(context, R.layout.player_container, this);
StyleConfig styleConfig = new StyleConfig();
styleConfig.setUiEnabled(false);
PlayerConfig playerConfig = new PlayerConfig();
playerConfig.setStyleConfig(styleConfig);
playerView = findViewById(R.id.bitmovinPlayerView);
player = Player.create(context, playerConfig);
playerView.setPlayer(player);
player.on(SourceEvent.Loaded.class, this::onLoad);
player.on(PlayerEvent.Playing.class, this::onPlay);
player.on(PlayerEvent.Paused.class, this::onPause);
player.on(PlayerEvent.Seek.class, this::onSeek);
player.on(PlayerEvent.TimeChanged.class, this::onTimeChanged);
player.on(PlayerEvent.Destroy.class, this::onDestroy);
player.on(PlayerEvent.Seeked.class, this::onSeeked);
player.on(PlayerEvent.PlaybackFinished.class, this::onPlaybackFinished);
player.on(PlayerEvent.Ready.class, this::onReady);
player.on(SourceEvent.Error.class, this::onError);
player.on(SourceEvent.SubtitleChanged.class, this::onSubtitleChanged);
player.on(PlayerEvent.Error.class, this::onError);
subtitleView = findViewById(R.id.bitmovinSubtitleView);
subtitleView.setPlayer(player);
player.setVolume(100);
}
Я читал, что React Native стилизует представление верхнего уровня компонента пользовательского интерфейса, так что это моя единственная подсказка на данном этапе. Однако я не знаю, как ответить на эту информацию ...
(Существует также меньшая проблема, как сделать фон по обе стороны от текста прозрачным, но проблема макета на этом этапе гораздо важнее).
1 ответ
Отказ от ответственности: я не очень хорошо знаком с React Native и как он влияет на создание макета, если вообще.
Однако, глядя на ваш файл макета, он указывает, что это верхний дочерний элемент
PlayerView
, который является
FrameLayout
, поэтому добавляется вверху (слева). Указав
android:layout_height="wrap_content"
на он будет занимать только то пространство, которое требуется для представления. В образце Bitmovin он генерируется в коде и, следовательно, должен наследовать атрибуты от родителя, который является
RelativeLayout
с
android:layout_weight="1"
что приводит к растягиванию его высоты до доступного пространства.
Короче говоря, попробуйте установить высоту вашего
SubtitleView
к
match_parent