@ART4

Как сделать, чтоб можно было зайти в полную версию Поста?

Добрый день, подскажите пожалуйста, пытаюсь выполнить полный цикл перехода, до конечной экрана.
Имеется страница с новостями.
5f10527a316ac955575301.jpeg
Хочу сделать теперь, чтоб при заходе в Пост, переходило именно в него и выводило Полный Пост.
Все посты выводятся через json.

Вывод постов из json (Items.js):
import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Platform, RefreshControl, StyleSheet, Text, View, FlatList, Image, TouchableHighlight, ScrollView, SafeAreaView, ActivityIndicator, WebView, Button, Alert} from 'react-native';
import ItemView from "../router/Item";

class Items extends Component {
    constructor(props) {
        super(props);
        this.state = {
          dataSource:[],
          loading: false,
          isListEnd: false,
          fetching_from_server: false,
          visible: true,
        };
    }

    componentDidMount(){
        fetch("######")
        .then(response => response.json())
        .then((responseJson)=> {
        this.setState({
            dataSource: responseJson
        })
    })
        .catch(error=>console.log(error)) //to catch the errors if any
    }

    render() {
        return (
            <FlatList
                  data={this.state.dataSource}
                  renderItem={({ item }) =>
                      <View style={styles.item}>
                           <Text style={styles.title}>
                              <Text style={{backgroundColor: "#ff6a6a", padding: 5, color: '#fff', fontSize:10}}> {item.id} </Text>
                              <Text>{item.title}</Text>
                           </Text>
                           <Image resizeMode="cover" source={{ uri: item.thumbnailUrl }} style={styles.imageView} />
                           <Text style={{padding: 5, color: '#737373',flex: 1}}>{item.announce}</Text>
                      </View>
                  }
                  keyExtractor={(item) => item.id.toString()}
            />
        );
    }
}

export default Items;

const styles = StyleSheet.create({
container: {

    },
     text:{
         textAlign: 'center',
         fontSize: 24,
         marginTop: 20
     },
     title: {
        fontSize: 16,
        textAlign: "center",
        backgroundColor: '#000',
        color: '#fdd000',
        padding: 5,
     },
     item: {
        borderWidth: 1,
        borderColor: '#ccc',
        backgroundColor: '#fff',
        marginBottom: 5,
     },
     imageView: {
         width: '100%',
         height: 100 ,
         margin: 0,
         borderRadius : 2
     },
     h1: {
        fontSize: 24,
        textAlign: "center",
        color: '#737373',
        marginBottom: 5,
     },
     loading: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
     },
});


При нажатие должно переходить вот сюда (Item.js):
import React, { Component }  from 'react';
import { Button, View, Text }  from 'react-native';

class ItemView extends Component {

    render()  {
        return (
            <View style= {{  flex:  1,  alignItems:  'center',  justifyContent:  'center' }}>
                <Text> About Screen< / Text>
            </View>
        );
    }
}

export default ItemView;


Подскажите пожалуйста, куда копать......
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы