如何在我的屏幕底部放置一個React Native按鈕以在多個ios設備上工作

我很年輕，可以對本機搜索網頁進行反饋，這些教程可以幫助我解決這個問題，但沒有找到任何東西。我知道如何將按鈕從A點移動到B屏幕上。事情是我似乎無法將其固定在底部，以處理我的ios仿真器的不同形式因素。到目前爲止，我已經嘗試使用marginTop，它將按鈕切換到屏幕，但只要我將模擬器更改爲不同的屏幕大小，按鈕就會有一點變化。我在問我可以得到任何指導，因爲我可以將它設置爲在不同的ios屏幕上工作。如何在我的屏幕底部放置一個React Native按鈕以在多個ios設備上工作

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

上面的代碼是我的按鈕。

來源

2016-04-04 youngreactNative

好的我會回答我自己的問題，想知道很多用戶我認爲我的問題是對flexbox的理解。這種情況是你需要知道如何創建一個列將持有按鈕像div的列我希望這可以幫助其他人瞭解如何定位您的按鈕爲未來的目的https://rnplay.org/apps/5N7vJA – youngreactNative

您可以使用絕對位置來放東西，無論你想...

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

將會把在屏幕上，左側的底部....

來源

2016-04-08 00:57:12 parker

你可以試試下面的代碼在https://facebook.github.io/react-native/docs/flexbox.html，直到該鏈接不再工作。

基本上你將屏幕分成3個部分，頂部可滾動和底部。下面的代碼只是做了簡單3次（沒有滾動，只需更換中間的一個與滾動型有somethign更加有用。

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> 
    ); 
    }

來源

2017-08-13 03:05:42 boatcoder

這裏是我放在浮動按鈕的右下方。屏幕

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

使用以下樣式的容器&按鈕：

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

輸出：

來源

2017-12-02 14:07:59

工作me.Thanks – bittu

如何在我的屏幕底部放置一個React Native按鈕以在多個ios設備上工作

回答

相關問題