使用flexbox，我如何創建這個簡單的應用程式頁面登錄螢屏？-有解無憂

我正在嘗試學習如何撰寫 React Native 應用程式，他們經常使用 Flexbox 來設計應用程式螢屏的樣式。如何使用 Flexbox 實作以下布局？

使用 flexbox，我如何創建這個簡單的應用程式頁面登錄螢屏？

這是我到目前為止的代碼：

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#cde9ff',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 5,
    },
    header: {
        borderWidth: 1,
        fontSize: 38,
        marginBottom: '50%',
    },
    form: {
        borderWidth: 1,
    },
    input: {
        width: 200,
        height: 44,
        padding: 10,
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
        backgroundColor: 'white',
        color: 'black',
        borderRadius: 10,
      },
    footer: {
        borderWidth: 1,
    },
  });

我試圖用邊距來做到這一點，但現在對我來說并不是很好，我認為最好盡可能正確地學習使用 Flexbox。

有人知道如何將樣式表 CSS 更改為如何輕松創建我制作的快速繪制影像布局嗎？

uj5u.com熱心網友回復：

我會做這樣的事情，并使用 flex-growth 推送到頁面末尾的頁腳

對于結構：

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>Title</Text>
      </View>
      <View style={styles.form}>
        <View style={styles.input}></View>
        <View style={styles.input}></View>
        <View style={styles.input}></View>
        <View style={styles.input}></View>
        <View style={styles.input}></View>
        <View style={styles.input}></View>
      </View>
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

對于 CSS ：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
  },
  header: {
    alignItems: "center",
    width: "75%"
  },
  form: {
    alignSelf: "center",
    justifyContent: "center",
    alignItems: "center",
    width: "75%",
    flexGrow: 1
  },
  input: {
    width: 200,
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: "black",
    marginBottom: 10,
    backgroundColor: "white",
    color: "black",
    borderRadius: 10
  },
  footer: {
    alignItems: "center",
    width: "50%"
  },
});

codesanbox : https://codesandbox.io/embed/green-cloud-ne9yt?fontsize=14&hidenavigation=1&theme=dark

uj5u.com熱心網友回復：

我認為你正在尋找這樣的東西：

HTML：

<div class="main-container">
  <div class="title">
    <h1> Title </h1>
  </div>
  <div class="form">
    form
  </div>
  <div class="cta">
    login
  </div>
</div>

CSS：

.main-container{
  height: 600px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center 
}

.main-container div{
  border: 1px solid black;
  width: 300px;
  padding: 50px
}

您必須將 display flex 添加到要靈活的 div 的父容器中

您可以查看 Shahriar 鏈接：https : //flexbox.malven.co/它解釋了 flex display 非常好

代碼筆：https ://codepen.io/MichaeIMyers/pen/WNEJpLW

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/353522.html

標籤：css 反应原生弹性盒

上一篇：反應原生視圖條件渲染

下一篇：如何在模態螢屏上隱藏底部欄？