Как правильно расположить 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

Другие вопросы по тегам