你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

huangapple
go评论116阅读模式
英文:

How can I position two buttons on top of the background side by side and at the bottom of the screen in React Native?

问题

在容器中，有一个position属性设置为relative，以及一个内部的</View>元素，其position属性设置为absolute，以便按钮位于背景中的视频屏幕之上。

当我给后者设置position属性为absolute时，它不再位于屏幕底部，但我需要这样设置它以保持在图像之上。

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

你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

这是包括absolute属性的代码：

  1. if (props.stream) {
  2.   return (
  3.     <>
  4.       <TouchableWithoutFeedback onPress={handleScreenPress}>
  5.         <View style={styles.videoViewWrapper}>
  6.           <RTCView style={styles.android} streamURL={props.stream.toURL()} />
  7.           <CountDown time={time} />
  8.           {/* {showButtons && */}
  9.           <View style={{
  10.             // position: 'absolute',
  11.           }}>
  12.             <Button
  13.               icon="phone"
  14.               mode="contained"
  15.               style={{ width: 200, margin: 10 }}
  16.               onPress={handleEndCall}
  17.             >
  18.               End Call
  19.             </Button>
  20.             <Button
  21.               icon="phone"
  22.               mode="contained"
  23.               style={{ width: 200, margin: 10 }}
  24.               onPress={handleSpeakerSwitch}
  25.             >
  26.               Speaker
  27.             </Button>
  28.           </View>
  29.           {/* } */}
  30.         </View>
  31.       </TouchableWithoutFeedback>
  32.     </>
  33.   );
  34. }
  35. return (<><Loader title="Connecting Your Call.." /></>);
  36. }
  38. const styles = StyleSheet.create({
  39.   videoViewWrapper: {
  40.     flex: 1,
  41.     overflow: 'hidden'
  42.   },
  43.   android: {
  44.     flex: 1,
  45.     position: 'relative',
  46.     backgroundColor: 'black'
  47.   }
  48. })
  50. export default VideoCall;

我正在寻求一些提示，以便我如何将这两个按钮在底部并在图像之上排列在一起，因为我遇到了困难。

英文:

I have a container with a position of relative and an inner &lt;/View&gt; 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:

你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

Here's my code including the absolute property:

  1. if (props.stream) {
  2.     return (
  3.       &lt;&gt;
  4.         &lt;TouchableWithoutFeedback onPress={handleScreenPress}&gt;
  5.           &lt;View style={styles.videoViewWrapper}&gt;
  6.             &lt;RTCView style={styles.android} streamURL={props.stream.toURL()} /&gt;
  7.             &lt;CountDown time={time} /&gt;
  8.             {/* {showButtons &amp;&amp; */}
  9.             &lt;View style={{
  10.               // position: &#39;absolute&#39;,
  11.             }}&gt;
  12.               &lt;Button
  13.                 icon=&quot;phone&quot;
  14.                 mode=&quot;contained&quot;
  15.                 style={{ width: 200, margin: 10 }}
  16.                 onPress={handleEndCall}
  17.               &gt;
  18.                 End Call
  19.               &lt;/Button&gt;
  20.               &lt;Button
  21.                 icon=&quot;phone&quot;
  22.                 mode=&quot;contained&quot;
  23.                 style={{ width: 200, margin: 10 }}
  24.                 onPress={handleSpeakerSwitch}
  25.               &gt;
  26.                 Speaker
  27.                 &lt;/Button&gt;
  28.             &lt;/View&gt;
  29.             {/* } */}
  30.           &lt;/View&gt;
  31.         &lt;/TouchableWithoutFeedback&gt;
  32.       &lt;/&gt;
  33.     );
  34.   }
  35.   return (&lt;&gt; &lt;Loader title=&quot;Connecting Your Call..&quot; /&gt; &lt;/&gt;)
  36. }
  38. const styles = StyleSheet.create({
  39.   videoViewWrapper: {
  40.     flex: 1,
  41.     overflow: &#39;hidden&#39;
  42.   },
  43.   android: {
  44.     flex: 1,
  45.     position: &#39;relative&#39;,
  46.     backgroundColor: &#39;black&#39;
  47.   }
  48. })
  50. 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.

答案1

得分: 2

Here's the translated code:

  1. 如果您想实现类似这样的效果，请查看以下代码：
  3. [![在这里输入图片描述][1]][1]
  5. 检查代码：
  7.     export default class App extends React.Component {
  8.       render() {
  9.         return (
  10.           <View style={{flex:1}}>
  12.             <View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>     
  13.                <TouchableOpacity
  14.                    
  15.                    
  16.                    
  17.                     style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
  18.                   >
  19.                   <Text style={{color:'white',alignSelf:'center', padding:5}}>结束通话</Text>
  20.                   </TouchableOpacity>
  21.                   <TouchableOpacity
  22.                      
  23.                    style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}
  24.           
  25.                    
  26.                   >
  27.                    <Text style={{color:'white',alignSelf:'center', padding:5}}>接听通话</Text>
  28.                   </TouchableOpacity>
  29.                   </View>
  30.           </View>
  31.         );
  32.       }
  33.     }
  35. 检查链接： [expo snack][2]
  37. 希望对您有所帮助，有疑问请随意提问。
  39.   [1]: https://i.stack.imgur.com/fnMmP.png
  40.   [2]: https://snack.expo.io/B1RYno6JL

Please note that the translation is provided as per your request and only includes the code portion. If you have any doubts, feel free to ask.

英文:

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

你可以将两个按钮在React Native中放置在屏幕底部并且并排放在背景上。

Check code :

  1. export default class App extends React.Component {
  2. render() {
  3. return (
  4. &lt;View style={{flex:1}}&gt;
  5. &lt;View style={{flex:1, flexDirection:&#39;row&#39;, alignItems:&#39;flex-end&#39;,}}&gt;     
  6. &lt;TouchableOpacity
  7. style={{width:&#39;40%&#39; , backgroundColor:&#39;blue&#39; ,marginHorizontal:10}}
  8. &gt;
  9. &lt;Text style={{color:&#39;white&#39;,alignSelf:&#39;center&#39;, padding:5}}&gt;End Call&lt;/Text&gt;
  10. &lt;/TouchableOpacity&gt;
  11. &lt;TouchableOpacity
  12. style={{width:&#39;40%&#39;, backgroundColor:&#39;blue&#39;,marginHorizontal:10}}
  13. &gt;
  14. &lt;Text style={{color:&#39;white&#39;,alignSelf:&#39;center&#39;, padding:5}}&gt;Pick Call&lt;/Text&gt;
  15. &lt;/TouchableOpacity&gt;
  16. &lt;/View&gt;
  17. &lt;/View&gt;
  18. );
  19. }
  20. }

check the link : expo snack

Hope it helps .feel free for doubts

答案2

得分: 0

要么你可以为它们分别设置位置，第一个按钮设置为上和左，第二个按钮设置为上和右，要么将它们放在一个视图中，并将视图的flexDirection属性设置为row，这样它们可以并排放置。我有一个卡片对象，上面有两个按钮，它就是这样工作的。

英文:

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.

huangapple
  • 本文由 发表于 2020年1月4日 00:36:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/59582127.html
  • css
  • javascript
  • react-native
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定