Question

我有这个代码，当我运行程序时，我得到的只是白色屏幕。没有错误，我可以看到我的日志，所以我知道程序渲染和运行。我的猜测是，这是<View/>风格的一些问题，但我不能解决这个问题。

所以这里的逻辑是我基本上在渲染视图中运行一个函数来检查内存中是否有令牌，并根据此信息呈现两种情况之一。

代码：

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()
  }

一切正常。现在我在一些逻辑中写它并且它渲染程序（基于日志）但视图是空白的。

Answer 1

来自React#height-and-width

如果某个组件的父级具有大于0的维度，则该组件只能展开以填充可用空间。如果父组件没有固定的宽度和高度或者弹性，则父组件的维度为0，而flex子组件将不是可见。

height没有提供width和View。

所以，即使是屏幕渲染，它也会变成空白。

将height和width分配给容器样式对象。

container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height : 200,
    width : 200
  })

另外，请查看flex属性。

RN渲染视图但显示白色空白屏幕

1 个答案: