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

Question

I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.

When I give the latter its property of absolute , it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.

Here are screenshots of before and after the inner element position on absolute :

Here's my code including the absolute property:

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;

I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.

Answer 1

If you want to achieve something like this, then see the code :

Check code :

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

check the link : expo snack

Hope it helps .feel free for doubts

Answer 2

Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.