我有这段代码,当我运行该程序时,我得到的只是白屏。没有错误,我可以看到我的日志,所以我知道程序呈现并运行。我的猜测是,<View/>
存在一些问题。风格,但我无法解决这个问题。
所以这里的逻辑是,我基本上在渲染 View 中运行一个函数,检查内存中是否有 token ,并根据此信息渲染两种情况之一。
代码:
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center'
})
checkToken = () => {
AsyncStorage.getItem('user')
.then((res) => {
res = JSON.parse(res)
console.log('this is checkToken()',res.token)
this.renderUserSection(res.token)
})
.catch((err) => {
console.log(err)
})
.done();
}
renderUserSection = (token) => {
if(token === undefined) {
console.log('render UserSection')
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.Signup.bind(this)} style={styles.button}>
<Text style={styles.buttonText}>SignUp</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.Login.bind(this)} style={styles.buttonLogin}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
)
} else {
if (!this.state.loading) {
return (
<View style={styles.container}>
{this.state.path ? this.renderMap() : this.renderCamera()}
</View>
);
} return (
<View style={styles.container}>
<Loader loading={this.state.loading}/>
</View>
)
}
}
render() {
return (
<View>{this.checkToken()}</View>
)
}
在该代码之前,我运行的示例是:
render() {
return this.renderUserSection()
}
一切都很好。现在我把它写在一些逻辑中,它渲染程序(基于日志),但 View 是空白的。
最佳答案
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
没有向View
提供高度
和宽度
。
因此,即使屏幕呈现,它也会变成空白。
将高度
和宽度
分配给容器样式对象。
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
height : 200,
width : 200
})
此外,请检查 flex
属性。
关于javascript - RN 渲染 View 但显示白色空白屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50369645/