web-dev-qa-db-ja.com

React複数のiOSデバイスで動作するように画面の下部にネイティブボタンを配置する方法

私はこの問題を解決するのに役立つかもしれないが、何も見つけられないチュートリアルのためにウェブのネイティブ検索に反応するのは若いです。画面のポイントAからBにボタンを移動する方法を知っています。問題は、IOSエミュレーターのさまざまなフォームファクターで動作するように修正することはできません。これまでのところ、ボタンを画面に移動するmarginTopを試しましたが、エミュレータを別の画面サイズに変更するとすぐにボタンが少し上がります。これをさまざまなios画面で動作するように設定する方法について、ガイダンスを得ることができますか。

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

上記のコードは私のボタンです。

javascriptiosreactjsreact-native
10
youngreactNative

絶対位置を使用して、どこにでも物を置くことができます...

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

画面の下部、左側に配置されます。

23
parker

画面の右下にフローティングボタンを配置した方法を次に示します。

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

コンテナとボタンには次のスタイルを使用します。

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

出力：

enter image description here

8
katwal-Dipak

リンクが機能しなくなるまで、 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
boatcoder