作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
免责声明:这是一个有关学校项目的问题。
我正在开发一个使用 React Native 作为前端的全栈项目。我在页面布局方面遇到一些问题。这是我的代码:
应用程序.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'
}
});
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;
我想要做的是将标题放在顶部,然后是文本,然后居中(垂直和水平),我希望有开关。相反,此代码当前正确放置标题和文本,但开关放置在最底部。任何帮助/资源将不胜感激。
最佳答案
尝试在文本样式上不使用 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 .
关于javascript - 如何在 React Native 中垂直居中项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60996791/
我是一名优秀的程序员,十分优秀!