javascript - 如何在 React Native 中将两个按钮并排放置在背景顶部和屏幕底部？

问题描述

我有一个位置为的容器和一个位置为relative的内部</View>元素，absolute因此按钮位于背景中的视频屏幕顶部。

当我给后者它的属性时absolute，它不再停留在屏幕的底部，但我需要给它这个，以便它保持在它后面的图像的“顶部”。

以下是内部元素位置之前和之后的屏幕截图absolute：

这是我的代码，包括absolute属性：

if (props.stream) {
    return (
      <>
        <TouchableWithoutFeedback onPress={handleScreenPress}>
          <View style={styles.videoViewWrapper}>
            <RTCView style={styles.android} streamURL={props.stream.toURL()} />
            <CountDown time={time} />
            {/* {showButtons && */}
            <View style={{
              // position: 'absolute',
            }}>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleEndCall}
              >
                End Call
              </Button>
              <Button
                icon="phone"
                mode="contained"
                style={{ width: 200, margin: 10 }}
                onPress={handleSpeakerSwitch}
              >
                Speaker
                </Button>
            </View>
            {/* } */}
          </View>
        </TouchableWithoutFeedback>
      </>
    );
  }
  return (<> <Loader title="Connecting Your Call.." /> </>)
}

const styles = StyleSheet.create({
  videoViewWrapper: {
    flex: 1,
    overflow: 'hidden'
  },
  android: {
    flex: 1,
    position: 'relative',
    backgroundColor: 'black'
  }
})

export default VideoCall;

我正在寻找一些技巧，以了解如何将两个按钮并排对齐在底部和其背后图像的顶部，因为我正在努力。

标签： javascriptcssreact-native

如果您想实现这样的目标，请查看代码：

校验码：

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex:1}}>

        <View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>     
           <TouchableOpacity



                style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
              >
              <Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
              </TouchableOpacity>
              <TouchableOpacity

               style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}


              >
               <Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
              </TouchableOpacity>
              </View>
      </View>
    );
  }
}

检查链接：世博小吃

希望它有所帮助。请随意怀疑

javascript - 如何在 React Native 中将两个按钮并排放置在背景顶部和屏幕底部？

问题描述

解决方案

推荐阅读