Question

我有一个容器，位置为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;

我正在寻找一些技巧，以解决由于挣扎而如何在底部图像的顶部和底部并排对齐两个按钮的情况。

Answer 1

如果要实现这样的目标，请参见代码：

验证码：

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>
    );
  }
}

检查链接：expo snack

希望它有助于消除疑惑。

Answer 2

您可以给它们单独的位置，第一个按钮的顶部和左侧，第二个按钮的顶部和右侧，或者将它们放在视图中并将视图的flexDirection设置为行，以便它们可以并排放置。我有一个卡对象和一个位于其顶部的两个按钮，它可以那样工作。

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

2 个答案: