如何在屏幕底部放置一个React Native Button来处理多个ios设备

Question

我很年轻,在网上寻找可以帮助我解决这个问题但没有找到任何东西的教程.我知道如何在屏幕上将按钮从A点移动到B. 事情是我似乎无法将它固定在底部,以处理我的ios模拟器的不同形状因素.到目前为止,我已经尝试过marginTop,它将按钮移到屏幕上但是只要我将模拟器更改为不同的屏幕大小,按钮就会上升一点.我问我可以获得任何指导,因为我可以将其设置为在不同的ios屏幕上工作.

  submitButton: {
    height: 85,
    flex: 1,
    backgroundColor: "#FFBB34",
    borderColor: "#555555",
    borderWidth: 0,
    borderRadius: 0,
    marginTop: 200,
    justifyContent: "flex-start"
}

上面的代码是我的按钮.

Answer 1

您可以使用绝对位置将物品放在任何地方......

submitButton: {
    position: 'absolute',
    bottom:0,
    left:0,
}

将放在屏幕的底部,左侧....

Answer 2

您可以在https://facebook.github.io/react-native/docs/flexbox.html尝试以下代码，直到该链接不再起作用。

基本上，您将屏幕分成 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>
    );
  }

Answer 3

这是我如何将浮动按钮放在屏幕的右下角.

return (
        <View style={mainConatinerStyle}>
            {this.renderSwiper()}
            {this.renderFloatingMenu()}
        </View>
    );

对容器和按钮使用以下样式:

mainConatinerStyle: {
    flexDirection: 'column',
    flex: 1
},floatingMenuButtonStyle: {
    alignSelf: 'flex-end',
    position: 'absolute',
    bottom: 35
}

输出: