React Native - цикл по массиву, который состоит из таких вещей, как изображение, текст и onPress, которые ведут на другой экран - PullRequest
Новая
       60

React Native - цикл по массиву, который состоит из таких вещей, как изображение, текст и onPress, которые ведут на другой экран

0 голосов
/ 16 июня 2019

Я создал пользовательский компонент, который получает свои данные с экрана, используя реквизиты, и повторяется три раза, используя циклы с массивом. Я был в состоянии отправлять разные вещи, такие как текст и изображение, каждый раз, когда компонент повторяется, помещая их в массив на этом экране. Я хотел бы, если есть способ реализовать то же самое, но на этот раз дать каждому компоненту различное «onPress». как мне это настроить? мне нужно возиться с массивом?

КОМПОНЕНТ.JS: 

import React, { Component } from "react";
import styled from "styled-components";

const StudyComponent = props => {
  return (
    <Container>
      <Cover>
        <Image source={props.image} />
        <Logo source={props.logo} />
        <Title>{props.title}</Title>
      </Cover>
    </Container>
  );
};

export default StudyComponent;

const Container = styled.View`
some css code!
`;

const Cover = styled.View`
some css code!
`;

const Image = styled.Image`
some css code!
`;

const Title = styled.Text`
some css code!
`;

const Logo = styled.Image`
some css code!
`;

ЭКРАН. JS 

import React, { Component } from "react";
import { TouchableOpacity} from "react-native";
import styled from "styled-components";
import THECOMPONENT from "../Components/THECOMPONENT";

class SelectedClasses extends Component {
  static navigationOptions = { header: null }; 

  render() {
    const { navigation } = this.props; 
    const selected = navigation.getParam("selected"); 
    return (

      <Container>
        <ComponentsContainer>
          {components.map((component, index) => (
            <TouchableOpacity
              key={index}
              onPress={() => {
                this.props.navigation.push("Courses", {
                  selectedcomponent: component
                });
              }}
            >
              <StudyComponent
                title={component.title}
                image={component.image}
                logo={component.logo}
              />
            </TouchableOpacity>
          ))}
        </ComponentsContainer>
      </Container>
    );
  }
}
export default SelectedClasses;

const Container = styled.View`
  some css code!
`;

const ComponentsContainer = styled.View`
  some css code!
`;

//THE ARRAY WHERE I DYNAMICALLY ADD TITLES, IMAGES AND LOGOS TO EACH COMPONENT THAT GET REPEATED USING THE LOOP ABOVE!

const components = [
  {
    title: "STUDY",
    image: require("../assets/STUDYCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/STUDYCOMPONENT-ICON.png")
  },
  {
    title: "GROUP CHAT",
    image: require("../assets/GROUPCHATCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/GROUPCHATCOMPONENT-ICON.png")
  },
  {
    title: "FIND TUTOR",
    image: require("../assets/FINDTUTORCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/FINDTUTORCOMPONENT-ICON.png")
  }
];

Я пробовал разные способы передачи OnPress в качестве реквизита, но пока не повезло. Скорее всего, я сделал что-то не так, так как я относительно новичок в ReactNative.

Я хочу, чтобы каждый повторяющийся компонент на экране перемещался на другой экран. я использую библиотеку реагирования-навигации

1 Ответ

0 голосов
/ 16 июня 2019

Чтобы перейти к отдельным экранам на onPress каждого компонента, добавьте отображаемое имя в массив components, а затем перейдите по этому экранному имени.

Например, предположим, что настройка вашего маршрутизаторакак показано ниже ( только для примера, не обязательно должно быть одинаковым, важны только имена экранов ) 

const MainNavigation = createStackNavigator({
    "STUDY": {
    screen: StudyScreen,
    ...
  },
    "GROUPCHAT": {
    screen: GroupChatScreen,
    ...
  },
  "FINDTUTOR": {
    screen: FindTutorScreen,
    ...
  }
})

Добавьте эти имена маршрутов к components как, 

const components = [
  {
    title: "STUDY",
    screen: "STUDY",
    image: require("../assets/STUDYCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/STUDYCOMPONENT-ICON.png")
  },
  {
    title: "GROUP CHAT",
    screen: "GROUPCHAT",
    image: require("../assets/GROUPCHATCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/GROUPCHATCOMPONENT-ICON.png")
  },
  ...
];

Теперь, если вы хотите добавить onPress и логику навигации внутри StudyComponent, измените ее следующим образом 

const StudyComponent = props => {
  return (
  <TouchableOpacity
        onPress={this.props.onPress}>
    <Container>
      <Cover>
        <Image source={props.image} />
        <Logo source={props.logo} />
        <Title>{props.title}</Title>
      </Cover>
    </Container>
  </TouchableOpacity>
  );
};

И в SCREEN.JS используйте ее следующим образом

...
render() {
    ...
    return (
      <Container>
        <ComponentsContainer>
          {components.map((component, index) => (
              <StudyComponent
                title={component.title}
                image={component.image}
                logo={component.logo}
                onPress={() => {
                  this.props.navigation.push(component.screen, {
                    selectedcomponent: component
                  });
                }}
              />
          ))}
        </ComponentsContainer>
      </Container>
    );
  }
...