Есть ли способ, которым я могу отправить массив объектов в реагировать нативно, в котором объекты содержат текст и соответствующее действие onPRess для текстов?

Question

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

const linkList = [{
title: "Some information",
onPress: () => {
  this.navigation.navigate("WebViewScreen", {
    title: "Some title",
    uri: "https://SomeLink.com"
  });
}},{
title: "Some information2",
onPress: () => {
  this.navigation.navigate("WebViewScreen", {
    title: "Some title2",
    uri: "https://SomeLink2.com"
  });
} }];

Внутри секции рендеринга у меня есть

<GuideLinkSection links={linkList} />

Мой конструктор выглядит так:

   constructor(props) {
    super(props);
    const { navigation } = this.props;
    this.navigation = navigation;
  }

В моем дочернем компоненте у меня есть:

    renderGuideListSection = () => {
    const { links, navigat } = this.props;
    return links.map(link => {
      return (
        <TouchableOpacity style={styles.view} onPress={link.onPress}>
          <Image style={styles.image} source={LinkImage} />
          <Text style={styles.titleText}>{link.title}</Text>
        </TouchableOpacity>
      );
    });
};



   render() {
    return this.renderGuideListSection();
  }

Это дает мне ошибку: «Не удается прочитать свойство« навигация »из неопределенного. Есть ли способ, которым я могу добиться этого без использования нескольких реквизитов?

Answer 1

let linkList = [
{
  title: 'Some information',
  navigateTo: 'WebViewScreen',
  label: 'Some title',
  uri: 'https://SomeLink.com'
},
{
  title: 'Some information2',
  navigateTo: 'WebViewScreen2',
  label: 'Some title2',
  uri: 'https://SomeLink2.com'
}
];

Вы можете сохранить массив, как указано выше.

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

redirectTo = ({navigateTo, label, uri}) => {
   let {navigation} = this.props;
   navigation.navigate(navigateTo, {
     title,
     uri
   })
}

renderGuideListSection = () => {
const { links } = this.props;
return links.map(link => {
  return (
    <TouchableOpacity style={styles.view} onPress={() => this.RedirectTo(link)}>
      <Image style={styles.image} source={LinkImage} />
      <Text style={styles.titleText}>{link.title}</Text>
    </TouchableOpacity>
  );
});