Question

已经提出了这个问题，但是这种情况是不同的。整个错误是：Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.这很容易解释。但是，这对我没有帮助，因为我的代码中没有Image组件，我已经检查过，并且没有地方调用Image组件。

显示的错误表明它在这里：

This error is located at:
    in NavigationContainer (at App.js:25)
    in App (at withExpoRoot.js:22)

这是我的App.js代码

import React from 'react';
import Expo from "expo";
import { AppLoading } from "expo";
import HomeScreen from "./src/HomeScreen/index.js";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  async componentWillMount() {
    // await Expo.Font.loadAsync({
    //   Roboto: require("native-base/Fonts/Roboto.ttf"),
    //   Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
    //   Ionicons: require("native-base/Fonts/Ionicons.ttf")
    // });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }
    return <HomeScreen />;
  }
}

HomeScreen.js

import React from "react";
import { StatusBar } from "react-native";
import { Container, Header, Title, Left, Icon, Right, Button, Body, Content, Text, Card, CardItem } from "native-base";

export default class HomeScreen extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
            transparent
            onPress={() => this.props.navigation.navigate("DrawerOpen")}>
            <Icon name="menu" />
            </Button>
          </Left>
          <Body>
              <Title>HomeScreen</Title>
          </Body>
          <Right />
          </Header>
          <Content padder>
                <Card>
                  <CardItem>
                  <Body>
                    <Text>Chat App to talk someawesome people</Text>
                  </Body>
                  </CardItem>
                </Card>
                <Button full rounded dark
                    style={{ marginTop: 10 }}
                    onPress={() => this.props.navigation.navigate("Chat")}>
                    <Text>Chat With People</Text>
                </Button>    
                <Button full rounded primary
                      style={{ marginTop: 10 }}
                      onPress={() => this.props.navigation.navigate("Profile")}>
                      <Text>Goto Profiles</Text>
                </Button>
            </Content>
          </Container>
    );
  }
}

您在这里看不到任何地方，我们称它为组件，这是我不知道的部分。有什么想法吗？

Answer 1

好吧，我正在回答自己可能遇到的其他人的问题。 React Native给出了

的错误

This error is located at:
    in NavigationContainer (at App.js:25)
    in App (at withExpoRoot.js:22)

但是在我的情况下，此错误位于子组件中的文件中： Sidebar.js

return (
  <Container>
    <Content>
    <Image
      source={{
        uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
      }}
      style={{
        height: 120,
        alignSelf: "stretch",
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Image
        square
        style={{ height: 80, width: 70 }}
        source={{
          uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
        }}
      />
    </Image>
    <List
      dataArray={routes}
      renderRow={data => {
        return (
          <ListItem
            button
            onPress={() => this.props.navigation.navigate(data)}>
            <Text>{data}</Text>
          </ListItem>
        );
      }}
      />
    </Content>
  </Container>
);

然后我将<Image>更改为<ImageBackground>，它可以正常工作。

没有<img/>组件，但我得到了<img/>组件不能包含子代

1 个答案: