Как реализовать выполнение функции при нажатии кнопки в другой функции и передать параметр

Question

Есть две функции Список новостей "News" и детальный просмотр "NewsDetail" Как реализовать чтобы при нажатии на кнопку в функции списка новостей открывалась страница функции детального просмотра. И как можно передать параметр со страницы Списка новостей на страницу Функции детального просмотра

import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import { NavigationContainer, DrawerActions } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
function News({ navigation })  {
return(
            <React.Fragment>
                <SafeAreaView style={{flex: 1, alignItems: 'center'}}>
                    <ScrollView>
                {
                    feed ? feed.items.map((item, index) => (

                            <Card>
                                <Card.Image source={{uri:item.enclosures[0].url}}></Card.Image>
                                <Card.Title>{item.title}</Card.Title>
                                <Text>Параметр</Text>
                                <Button onPress={() => NewsDetail} title="Подробнее"></Button>
                            </Card>
                    )) :

                        <Text>Идет загрузка новостей</Text>
                }
                    </ScrollView>
                </SafeAreaView>
            </React.Fragment>
    )
}

function NewsDetail() { 
    return (
        <SafeAreaView style={{ flex: 1,  alignItems: 'center' }}>
            <Card>
                <Card.Image></Card.Image>
                <Card.Title>Большой тестовый текст блаблабла бла бла бла бла бла боа</Card.Title>
                <Button title="Подробнее"></Button>
            </Card>
        </SafeAreaView>
    );

}

Answer 1

Это пример с использованием навигации route.params, при нажатии на кнопку идем на другой скрин. Если в новости только текст, то можно использовать Модал.

import React from 'react';
import { Button, SafeAreaView, ScrollView, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const feed = [
  {
    name: 'Новость 1',
    id: 'n-1',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 2',
    id: 'n-2',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 3',
    id: 'n-3',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 4',
    id: 'n-4',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 5',
    id: 'n-5',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 6',
    id: 'n-6',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 7',
    id: 'n-7',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 8',
    id: 'n-8',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
  {
    name: 'Новость 9',
    id: 'n-9',
    title: 'Короткий текст',
    description:
      'Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс Очень доооооооооооо оооооооо оооооооооооооооооооооо ооооооооооооооо оооооооооооооооооолгий текс',
  },
];

const News = ({ navigation }) => {
  const toDetails = (item) => {
    navigation.navigate('Details', item);
  };
  return (
    <>
      <SafeAreaView style={{ flex: 1, alignItems: 'center' }}>
        <ScrollView>
          {feed.length ? (
            feed.map((item) => (
              <View
                key={item.name}
                style={{
                  width: '100%',
                  flexDirection: 'row',
                  justifyContent: 'space-around',
                  alignItems: 'center',
                  marginBottom: 10,
                }}>
                <Text>{item.title}</Text>
                <Button onPress={() => toDetails(item)} title="Подробнее" />
              </View>
            ))
          ) : (
            <Text>Идет загрузка новостей</Text>
          )}
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const NewsDetail = ({ route, navigation }) => {
  const news = route.params;

  const goBack = () => navigation.goBack();
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Text>{news.description}</Text>
      <Button title="Назад" onPress={() => goBack()}></Button>
    </View>
  );
};

const RootStack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="News" component={News} />
        <RootStack.Screen name="Details" component={NewsDetail} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default App;

БЛОГ НА HUSL

Как реализовать выполнение функции при нажатии кнопки в другой функции и передать параметр

Ответы (1 шт):