React Native-路由“ Home”的组件必须是React组件

时间：2018-12-30 07:51:37

标签： javascript react-native expo

对本机有新的反应。试图通过研究类似的问题here和here来解决此问题，但到目前为止没有成功。我相信它正在尝试访问该变量，但显然，我可能没有采取反应的方式。

enter image description here

这是我的App.js：

import React from 'react';
import { StatusBar } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import HomeStackNavigator from './src/components/navigation/home-stack-navigator';
import { COLORS } from './src/constants/styles';
import styled from 'styled-components/native';

const DrawerContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BRIGHT_GREY};
`;

const AppContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
`;

const drawerRouteConfig = {
  Home: {
    screen: HomeStackNavigator,
  },
};

const CustomDrawerContentComponent = props => (
  <DrawerContainer>
    <DrawerItems {...props} />
  </DrawerContainer>
);

const drawerNavigatorConfig = {
  contentComponent: props => <CustomDrawerContentComponent {...props} />,
};

const AppDrawer = DrawerNavigator(drawerRouteConfig, drawerNavigatorConfig);

export default class App extends React.Component {
  render() {
    return (
      <AppContainer>
        <StatusBar hidden={true} />
        <AppDrawer />
      </AppContainer>
    );
  }
}

还有home-stack-navigator.js：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from '../../components/screens/home-screen';
import ShowDetailsScreen from '../../components/screens/show-details-screen';

const HomeStackNavigator = StackNavigator(
  {
    Main: { screen: HomeScreen },
    ShowDetails: { screen: ShowDetailsScreen },
  },
  {
    initialRouteName: 'Main',
    headerMode: 'none',
  },
);

export default HomeStackNavigator;

我也正在使用expo作为构建器。任何建议将不胜感激。

更新：

这是我的home-screen.js：

import React, { Component } from 'react';
import styled from 'styled-components/native';
import Header from '../../components/common/header';
import { COLORS } from '../../constants/styles';
import { TouchableWithoutFeedback, ScrollView, TouchableOpacity } from 'react-native';
import ShowData from '../../data/data';
import Icon from 'react-native-vector-icons/FontAwesome';

const Container = styled.View`
  display: flex;
  width: 100%;
  height: 100%;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
`;

const UserNavigationContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
`;

const UserNavigationLink = styled.View`
  margin-right: 10;
  margin-left: 10;
  margin-top: 10;
  padding-top: 10;
  padding-right: 10;
  padding-left: 10;
  padding-bottom: 10;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
  border-bottom-width: 5;
`;

const ActiveUserNavigationLink = styled(UserNavigationLink)`
  border-bottom-color: ${COLORS.RED.FIRE_ENGINE_RED};
`;

const UserNavigationLinkText = styled.Text`
  color: ${COLORS.WHITE.WHITE}
`;

const ImageContainer = styled.View`
  display: flex;
  flex-direction: row;
`;

const Image = styled.Image`
  width: 75;
  height: 100;
  margin-left: 5;
  margin-right: 5;
  margin-top: 10;
`;

const SubHeader = styled.View`
  padding-top: 15;
  padding-bottom: 5;
  padding-left: 15;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const SubHeaderTextContainer = styled.View`
`;

const SubHeaderTitleText = styled.Text`
  color: ${COLORS.WHITE.WHITE};
`;

const SubHeaderText = styled.Text`
  color: ${COLORS.GREY.BRIGHT_GREY};
`;

const AllContainer = styled.View`
  align-self: flex-end;
  display: flex;
  flex-direction: row;
`;

const AllText = styled.Text`
  color: ${COLORS.GREY.BRIGHT_GREY};
  align-self: center;
  margin-right: 5;
`;

const IconContainer = styled.View`
  margin-right: 10;
`;

class HomeScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: 'browse',
    };

    this.setActiveUserNavigation = this.setActiveUserNavigation.bind(this);
  }

  setActiveUserNavigation(selected) {
    this.setState({
      selected,
    });
  }

  renderUserNavigation() {
    const userNavigation = [{ title: 'BROWSE', id: 'browse' }, { title: 'MY LIST', id: 'my-list' }];
    const { selected } = this.state;

    return userNavigation.map((element, index) => {
      if (selected === element.id) {
        return (
          <TouchableWithoutFeedback
            onPress={() => this.setActiveUserNavigation(element.id)}
            key={index}
          >
            <ActiveUserNavigationLink>
              <UserNavigationLinkText>{element.title}</UserNavigationLinkText>
            </ActiveUserNavigationLink>
          </TouchableWithoutFeedback>
        );
      } else {
        return (
          <TouchableWithoutFeedback
            onPress={() => this.setActiveUserNavigation(element.id)}
            key={index}
            >
            <UserNavigationLink>
              <UserNavigationLinkText>{element.title}</UserNavigationLinkText>
            </UserNavigationLink>
          </TouchableWithoutFeedback>
        );
      }
    });
  }

  render() {
    return (
      <Container>
        <Header openDrawer={() => this.props.navigation.navigate('DrawerOpen')} />
        <UserNavigationContainer>
          {this.renderUserNavigation()}
        </UserNavigationContainer>
        <SubHeader>
          <SubHeaderTextContainer>
            <SubHeaderTitleText>
              {'Trending Now'}
            </SubHeaderTitleText>
            <SubHeaderText>
              {'Recommended for you'}
            </SubHeaderText>
          </SubHeaderTextContainer>
          <AllContainer>
            <AllText>{'All'}</AllText>
            <IconContainer>
              <Icon name={'angle-right'} size={20} color={COLORS.GREY.BRIGHT_GREY} />
            </IconContainer>
          </AllContainer>
        </SubHeader>
        <ScrollView horizontal={true}>
          <ImageContainer>
            {ShowData.map((show, index) => (
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('ShowDetails', show)}
                key={index}
              >
                <Image source={show.image} key={index} />
              </TouchableOpacity>
            ))}
          </ImageContainer>
        </ScrollView>
        <SubHeader>
          <SubHeaderTitleText>
            {'Continue Watching for JM'}
          </SubHeaderTitleText>
          <AllContainer>
            <AllText>{'All'}</AllText>
            <IconContainer>
              <Icon name={'angle-right'} size={20} color={COLORS.GREY.BRIGHT_GREY} />
            </IconContainer>
          </AllContainer>
        </SubHeader>
        <ScrollView horizontal={true}>
          <ImageContainer>
            {ShowData.map((show, index) => (
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('ShowDetails', show)}
                key={index}
              >
                <Image source={show.image} key={index} />
              </TouchableOpacity>
            ))}
          </ImageContainer>
        </ScrollView>
        <SubHeader>
          <SubHeaderTitleText>
            {'Recently Added'}
          </SubHeaderTitleText>
          <AllContainer>
            <AllText>{'All'}</AllText>
            <IconContainer>
              <Icon name={'angle-right'} size={20} color={COLORS.GREY.BRIGHT_GREY} />
            </IconContainer>
          </AllContainer>
        </SubHeader>
        <ScrollView horizontal={true}>
          <ImageContainer>
            {ShowData.map((show, index) => (
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('ShowDetails', show)}
                key={index}
              >
                <Image source={show.image} />
              </TouchableOpacity>
            ))}
          </ImageContainer>
        </ScrollView>
      </Container>
    );
  }
}

export default HomeScreen;

还有show-details-sceeen.js：

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components/native';
import { COLORS } from '../../constants/styles';
import Icon from 'react-native-vector-icons/FontAwesome';

const Container = styled.View`
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
  height: 100%;
`;

const TitleContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 10;
  padding-left: 10;
  padding-bottom: 10;
`;

const TitleText = styled.Text`
  color: ${COLORS.WHITE.WHITE};
`;

const SummaryContainer = styled.View`
  background-color: ${COLORS.GREY.BRIGHT_GREY};
  padding-top: 10;
  padding-right: 10;
  padding-left: 10;
  padding-bottom: 10;
`;

const SummaryText = styled.Text`
  color: ${COLORS.WHITE.WHITE};
`;

const SummaryHeader = styled(SummaryText)`
  margin-bottom: 15;
`;

const SummaryCreditsText = styled.Text`
  color: ${COLORS.GREY.BLACK_RUSSIAN};
  margin-top: 5;
`;

const HeaderContainer = styled.View`
`;

const ImageHeader = styled.Image`
  width: 100%;
  height: 150;
  margin-top: 10;
`;

const BackIconContainer = styled.View`
  margin-top: 10;
  margin-left: 10;
`;

const PlayIconContainer = styled.View`
  margin-left: 10;
`;

const MyListButton = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 90;
  height: 30;
  background-color: ${COLORS.GREY.BRIGHT_GREY};
  margin-right: 10;
`;

const MyListButtonText = styled.Text`
  color: ${COLORS.WHITE.WHITE};
  margin-left: 5;
`;

class ShowDetailsScreen extends Component {
  render() {
    const { params } = this.props.navigation.state;
    return (
      <Container>
        <HeaderContainer>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <BackIconContainer>
              <Icon name={'arrow-left'} size={30} color={COLORS.WHITE.WHITE} />
            </BackIconContainer>
          </TouchableOpacity>
          <ImageHeader source={params.image} resizeMode={'contain'} />
          <TouchableOpacity onPress={() => {}}>
            <PlayIconContainer>
              <Icon name={'play-circle-o'} size={60} color={COLORS.WHITE.WHITE} />
            </PlayIconContainer>
          </TouchableOpacity>
        </HeaderContainer>
        <TitleContainer>
          <TitleText>{params.title}</TitleText>
          <TouchableOpacity onPress={() => {}}>
            <MyListButton>
              <Icon name="plus" size={10} color={COLORS.WHITE.WHITE} />
              <MyListButtonText>{'MY LIST'}</MyListButtonText>
            </MyListButton>
          </TouchableOpacity>
        </TitleContainer>
        <SummaryContainer>
          <SummaryHeader>{'Summary'}</SummaryHeader>
          <SummaryText>{params.summary}</SummaryText>
          <SummaryCreditsText>{'Starring: '}{params.starring}</SummaryCreditsText>
          <SummaryCreditsText>{'Creator: '}{params.creator}</SummaryCreditsText>
        </SummaryContainer>
      </Container>
    );
  }
}

export default ShowDetailsScreen;

0 个答案:

没有答案
相关问题
最新问题