Question

我查找了其他答案，例如在flex: 1上使用View，我仍然遇到同样的错误。我认为它与彼此相邻的Image标签有关？

    render() {
    return (

      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) =>
          <View style={{flex: 1}}>

          {this.state.username   ?
          <Image source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>
          <Image square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>
          <Text style={styles.nameText}>{item.first_name} {item.last_name}</Text>
          :

          <Image source={drawerCover} style={styles.drawerCover} />
          <Image square style={styles.drawerImage} source={drawerImage} />

          }
          </View>
        }
              keyExtractor={(item, index) => index}
         />



          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

这是抽屉导航，我希望它看起来与材料设计类似。这就是说如果用户登录然后显示该人的图像。如果没有那么默认图像。

Answer 1

使用JSX时，您只能返回单个元素。在您的解决方案中，有多个元素是Image组件。解决这个问题的方法是将所有这些包装在div中。

Answer 2

我不会引入新元素来包装图像并人为地将错误静音，你可以返回一个组件列表（Array），因为它有单个父元素呈现它，我已经删除了一些代码以简洁：

      /* CUT */
      renderItem={({item}) =>
      <View style={{flex: 1}}>

      {this.state.username   ?
      [
          <Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
          <Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
          <Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
      ]
      :
      [
          <Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
          <Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
      ]
      }
      </View>
    }
          keyExtractor={(item, index) => index}
     />
      /* CUT */

相邻的JSX元素必须包装在图像的封闭标签中？

2 个答案: