Это пример с использованием навигации 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;
onPress
который будет вести вас на другой скрин и там уже показывайте все что захотите. Передать параметры для показа вы можете несколькими способами.Redux
и вытаскивать по id новости, передавать какnavigation.params
или если вы храните новости на сервере то наuseFocusEffect
звать api с нужными данными опять по id (аналогично redux)onPress={() => NewsDetail}
, во первых вы ее не вызвали,onPress={() => NewsDetail()}
а во вторых, по нажатию на кнопку вызови компонент, это что за логика? Кнопки нужны, что бы обрабатывать hadle события а не что бы рендерить компоненты. Вам стоить изучить JavaScrip прежде чем браться за React и/или React-native