Javascript 如何在我的屏幕底部放置一个 React Native 按钮以在多个 ios 设备上工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36412395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
提问by youngreactNative
I am young to react native search the web for tutorials that could help me with this problem but have not find anything. I know how to move the buttons from point A to B on my screen. The thing is I just cant seem to get it to be fixed at the bottom to work on different form factors of my ios emulator. So far I have tried marginTop which takes down the button to the screen but as soon as a I change the emulator to a different screen size the button goes up a little. I am asking can I get any guidance as how I may set this to work on different ios screens.
我很年轻，可以在网络上搜索可以帮助我解决此问题的教程，但没有找到任何内容。我知道如何将屏幕上的按钮从 A 点移动到 B 点。问题是我似乎无法将它固定在底部以在我的 ios 模拟器的不同外形尺寸上工作。到目前为止，我已经尝试使用 marginTop 将按钮移到屏幕上，但是一旦我将模拟器更改为不同的屏幕尺寸，按钮就会上升一点。我问我是否可以获得任何指导，以了解如何将其设置为在不同的 ios 屏幕上工作。
submitButton: {
height: 85,
flex: 1,
backgroundColor: "#FFBB34",
borderColor: "#555555",
borderWidth: 0,
borderRadius: 0,
marginTop: 200,
justifyContent: "flex-start"
}
The code above is my button.
上面的代码是我的按钮。
回答by parker
You can use absolute position to put things wherever you want...
你可以使用绝对位置把东西放在任何你想要的地方......
submitButton: {
position: 'absolute',
bottom:0,
left:0,
}
will put at bottom of screen, left side....
将放在屏幕底部，左侧....
回答by katwal-Dipak
Here is how I placed the floating button at the bottom-right of the screen.
这是我将浮动按钮放置在屏幕右下角的方式。
return (
<View style={mainConatinerStyle}>
{this.renderSwiper()}
{this.renderFloatingMenu()}
</View>
);
Use the following styles for container & button:
对容器和按钮使用以下样式：
mainConatinerStyle: {
flexDirection: 'column',
flex: 1
},floatingMenuButtonStyle: {
alignSelf: 'flex-end',
position: 'absolute',
bottom: 35
}
Output:
输出：
回答by boatcoder
You can try the code below at https://facebook.github.io/react-native/docs/flexbox.htmluntil that link doesn't work anymore.
您可以在https://facebook.github.io/react-native/docs/flexbox.html尝试以下代码，直到该链接不再起作用。
Basically you are splitting the screen into 3 pieces, top scrollable, and bottom. The code below is just doing 3 views for simplicity (no scrolling, just replace the middle one with a ScrollView to have somethign more useful.
基本上，您将屏幕分成 3 个部分，顶部可滚动和底部。为了简单起见，下面的代码只是做了 3 个视图（没有滚动，只需用 ScrollView 替换中间的一个，以获得更有用的东西。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{height: 50, backgroundColor: 'powderblue'}} />
<View style={{flex:1, backgroundColor: 'skyblue'}} />
<View style={{height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
