Размещение кнопок над полноэкранным видео в React Native - PullRequest
Новая
       56

Размещение кнопок над полноэкранным видео в React Native

0 голосов
/ 22 января 2020

Я играю видео, которое занимает весь экран (полная высота и ширина устройства). Я также хотел бы отобразить пару кнопок и описание видео (вроде как TikTok).

Как лучше всего добавить текст и кнопки поверх видео? В настоящее время я играю вокруг атрибутов position и bottom, но заметил, что он не выглядит хорошо для всех размеров, поскольку нижнее значение не работает для каждого размера экрана.

Это то, что у меня сейчас есть: 

<View style={{flex: 1, height: height, width: width, backgroundColor: colors.BLACK}}>
                    <VideoPlayer
                        style={StyleSheet.absoluteFill}
                        paused={index !== this.state.currentVisibleIndex}
                        source={{uri: item.mediaUri}}
                        repeat={true}
                        disableFullscreen
                        disableVolume
                        onBack={() => this.props.navigation.goBack()}
                    />
                </View>

                <View style={{position: 'absolute', bottom: 125, justifyContent: 'flex-start', alignItems: 'flex-start'}}>
                    <Text style={styles.username_text}>@{item.username}</Text>
                    <Text style={styles.description_text}>{item.description}</Text>
                </View>
...