[英]In React Native, nothing renders with the code I have
So I am very confused because in the code below, a button should render, but nothing does. 所以我很困惑,因为在下面的代码中,应该呈现一个按钮,但是什么也没做。 All I get is a blank white screen.
我所得到的只是一个空白的白色屏幕。 I don't get any errors, and the terminal says finished loading javaScript bundle, so the code is working as it should.
我没有收到任何错误,并且终端说完成了javaScript包的加载,因此代码可以正常工作。 I don't know why this is happening and I would really like some help.
我不知道为什么会这样,我真的想要一些帮助。
This is using react native and javascript. 这是使用react native和javascript。
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 {
componentDidMount() {
Expo.Font.loadAsync({
'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View>
<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="#841584"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{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}
</TextInput>
<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'}} />
<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>
);
}
} // missing one!
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center',
justifyContent: 'center'
},
});
First I think you have a styling issue. 首先,我认为您有样式方面的问题。 The most outer
View
should have a flex:1
style prop at least. 最外部的
View
至少应具有flex:1
样式道具。 Also removing justifyContent: 'center'
and alignItems: 'center'
can help. 此外,删除
justifyContent: 'center'
和alignItems: 'center'
也会有所帮助。
Your second problem is caused by onPress
prop of the Button
. 您的第二个问题是由
Button
onPress
引起的。 You are executing the function rather than passing it as a parameter. 您正在执行函数,而不是将其作为参数传递。
It should be like below; 它应该像下面这样;
onPress={() => this.setState({ fontLoaded: true })}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.