javascript - RN 渲染 View 但显示白色空白屏幕

Question

我有这段代码，当我运行该程序时，我得到的只是白屏。没有错误，我可以看到我的日志，所以我知道程序呈现并运行。我的猜测是，<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 是空白的。

Answer 1

来自 React#height-and-width

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 属性。