React Native - 循环遍历由图像、文本和通向不同屏幕的 onPress 等内容组成的数组

Question

我构建了一个自定义组件，它使用道具从屏幕接收数据，并使用数组循环重复三次。通过将它们放入该屏幕中的数组中，每次重复组件时，我都能够发送不同的内容，例如文本和图像。我想是否有办法实现相同的事情，但这次给每个组件一个不同的 "onPress"。我该如何设置？我需要弄乱数组吗？

COMPONENT.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!
`;

SCREEN.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 比较陌生。

我希望能够将屏幕上的每个重复组件导航到不同的屏幕。 p.s 我正在使用 react-navigation 库

Answer 1

要导航到每个组件 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")
  },
  ...
];

现在，如果您想在 StudyComponent 中添加 onPress 和导航逻辑，请像这样更改它

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

React Native - 循环遍历由图像、文本和通向不同屏幕的 onPress 等内容组成的数组

React Native - Looping through an array that is consist of things like image, text AND an onPress that leads to a different screen

arrays

loops

react-native

screen

onpress