[英]Formatting doesn't work correctly in JavaScript
Problem In react native and JavaScript I am coding an app.问题在 React Native 和 JavaScript 中,我正在编写一个应用程序。 The button that loads the font takes up half the screen, and the actual app takes up the other half.
加载字体的按钮占据了屏幕的一半,实际的应用程序占据了另一半。 I am wondering how to have the button take up the top, and then have the rest of the app render much bigger.
我想知道如何让按钮占据顶部,然后让应用程序的其余部分渲染得更大。 Help would be great!
帮助会很棒!
Code代码
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
var fontLoaded = false;
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
title=" + "
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} />
<View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center'
},
});
Screenshot截屏
You can use flexbox to achieve this.您可以使用 flexbox 来实现这一点。 Think of the flex property as a ratio.
将 flex 属性视为一个比率。 if you give your button container a flex of 1 and give the container below it a flex of 3, their ratio will be 3:1.
如果你给你的按钮容器 flex 1 并给它下面的容器 flex 3,它们的比例将为 3:1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.