如何在 React Native 中垂直居中项目答案

【问题标题】：How to vertically center item in React native如何在 React Native 中垂直居中项目
【发布时间】：2020-04-02 16:48:24
【问题描述】：

免责声明：这是一个关于学校项目的问题。

我正在开发一个使用 React Native 作为前端的全栈项目。我在页面布局方面遇到了一些问题。这是我的代码：

App.js：

import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

import Header from "./components/Header";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={styles.screen}>
      <Header title="Web Application" />
      <Text style={styles.text}>Example Text</Text>
      <Text style={styles.text}>Not much here yet, so play with this switch</Text>
      <Switch
        style={styles.switch}
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 24,
    backgroundColor: 'white'
  },
  switch: {
    alignSelf: 'center',
    flexDirection: 'column',
    justifyContent: 'space-between'
  }
});

页眉.js

import React from "react";
import { StyleSheet, View, Text, Platform } from "react-native";

import Colors from "../constants/colors";

const Header = props => {
  return (
    <View style={{ ...styles.headerBase, ...Platform.select({ios: styles.headerIOS, android: styles.headerAndroid, web: styles.headerBase})}} >
      <Text style={styles.headerTitle}>{props.title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  headerBase: {
    width: "100%",
    height: 90,
    paddingTop: 36,
    alignItems: "center",
    justifyContent: "center",

  },
  headerIOS: {
    backgroundColor: 'black',
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  headerAndroid: {
    backgroundColor: Colors.primary,
  },
  headerTitle: {
    color: Platform.OS === 'ios' ? Colors.primary : 'black',
    fontSize: 24
  },
});

export default Header;

我想要做的是让标题在顶部，然后是文本，然后居中（垂直和水平）我想要切换。相反，此代码当前正确放置了标题和文本，但开关放置在最底部。任何帮助/资源将不胜感激。

【问题讨论】：

标签： javascript reactjs react-native web-frontend react-native-web

【解决方案1】：

尝试在文本样式上不使用flex: 1。

import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

import Header from "./components/Header";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={styles.screen}>
      <Header title="Web Application" />
      <Text style={styles.text}>Example Text</Text>
      <Text style={styles.text}>Not much here yet, so play with this switch</Text>
      <Switch
        style={styles.switch}
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 24,
    backgroundColor: 'white'
  },
  switch: {
    alignSelf: 'center',
    flexDirection: 'column',
    justifyContent: 'space-between'
  }
});

这是documentation。

【讨论】：