如何将React原生按钮定位在屏幕底部以在多个iOS设备上工作

ryoqjall 于 2022-11-17 发布在 React

关注(0)|答案(4)|浏览(134)

我很年轻，在网上搜索教程，可以帮助我解决这个问题，但没有找到任何东西。我知道如何在我的屏幕上移动按钮从A点到B点。问题是，我似乎不能让它固定在底部，以工作在我的ios模拟器的不同形式因素。到目前为止，我已经尝试了marginTop，它可以将按钮降到屏幕上，但只要我将模拟器更改为不同的屏幕大小，按钮就会上升一点。我问我能得到任何指导，因为我可以如何设置这在不同的ios屏幕上工作。

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

上面的代码是我的按钮。

react-native

来源：https://stackoverflow.com/questions/36412395/how-to-position-a-react-native-button-at-the-bottom-of-my-screen-to-work-on-mult

4条答案

按热度按时间

hiz5n14c1#

你可以使用绝对位置把东西放在你想放的地方...

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

将放置在屏幕底部，左侧....

赞(0）回复(0）举报 2022-11-17

wz8daaqr2#

下面是我如何将浮动按钮放置在屏幕的右下角。

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

对容器按钮使用以下样式（& B）：

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

输出量：

赞(0）回复(0）举报 2022-11-17

92vpleto3#

您可以在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>
    );
  }

赞(0）回复(0）举报 2022-11-17

gg0vcinb4#

所述元件

<View style={style.viewBtn}>
  <TouchableOpacity style={style.btn} onPress={() => {}}>
  <Text style={style.txtBtn}>Send</Text>
   </TouchableOpacity>
  </View>

CSS

viewBtn: {
    position: 'absolute',
    bottom: 0,
    height: window.height * 0.1,
    width: window.width * 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn: {
    height: window.height * 0.07,
    width: window.width * 0.8,
    backgroundColor: colors.cornflower,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  },
  txtBtn: {
    textAlign: 'center',
    fontSize: 21,
    color: 'white',
    fontWeight: 'bold',
  },

希望这段代码能帮助你解决问题，不要忘了使用尺寸来设置身高和体重，但是可以选择使用尺寸

赞(0）回复(0）举报 2022-11-17

我来回答

如何将React原生按钮定位在屏幕底部以在多个iOS设备上工作

4条答案

相关问题

热门标签

最新问答