React Native Networking с помощью react-native-router-flux

Question

Привет, ребята, у меня короткий вопрос. Я хочу дать каждой кнопке другую страницу.

import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View, TouchableOpacity } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true
    };
  }

  componentDidMount() {
    fetch('https://reactnative.dev/movies.json')
      .then((response) => response.json())
      .then((json) => {
        this.setState({ data: json.movies });
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { data, isLoading } = this.state;

    return (
      <View style={{ flex: 1, padding: 24 }}>
        {isLoading ? <ActivityIndicator/> : (
          <FlatList
            data={data}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <TouchableOpacity>
                <Text>{item.title}</Text>
              </TouchableOpacity>
              
            )}
          />
        )}
      </View>
    );
  }
};

Код дает мне имена mov ie как Button, и я могу щелкнуть по каждому. Прямо сейчас я хочу открыть для каждой кнопки другую страницу с response-native-router-flux.

{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{
"id": "1",
"title": "Star Wars",
"releaseYear": "1977"
},
{
"id": "2",
"title": "Back to the Future",
"releaseYear": "1985"
},
{
"id": "3",
"title": "The Matrix",
"releaseYear": "1999"
},
{
"id": "4",
"title": "Inception",
"releaseYear": "2010"
},
{
"id": "5",
"title": "Interstellar",
"releaseYear": "2014"
}
]
}

Это Json Данные, из которых я беру имена. Может быть, "id" мне поможет, но я действительно не знаю, что я могу сделать прямо сейчас.

Answer 1

Я могу дать вам только некоторые рекомендации, потому что это слишком грубо объяснять, хотя это короткий вопрос.

Я помню, что использовал react-native-router-flux, чтобы импортировать вашу сцену (страницу) и используя Actions.somepage() для перехода на страницу. Но использовать FlastList сложно, как это Actions.eachpage. (Может быть, просто моих навыков недостаточно для достижения)

Если вы хотите достичь того, что описано в вашем описании, я порекомендую вам создать новый компонент страницы для обработки всей сцены, теперь мы просто назвали "HandlePage" , а затем вы можете добавить его в свой TouchableOpacity, используя как

import HandlePage from "./HandlePage";
...
<TouchableOpacity onPress={() => { Actions.HandlePage({page: item.id}); }}

Чтобы вы могли управлять страницей в HandlePage, возьмите этот параметр (id), чтобы определить, какую страницу вы хотите отобразить . На самом деле, для маршрутизации используется только один Actions.HandlePage, но он более гибок для рендеринга того, что вы хотите.

Надеюсь, это может помочь.

---

Обновление:

Примерно так:

import StarWars from "./StarWars";
import TheMatrix from "./TheMatrix";
import Inception from "./Inception";
import Interstellar from "./Interstellar";

export default class HandlePage extends React.Component {
  checkSwitch = param => {
    switch (param) {
      case "1":
        return <StarWars/> ;
      case "2":
        return <TheMatrix recordCount = {this.state.recordCount}/>;

      case "3":
        return <Inception disabled = {this.state.disabled3}/>;

      case "4":
        return <Interstellar alert = {this.state.alert4}/>;

      default:
        return null;
    }
  };
  render() {
    return ({
      this.checkSwitch(this.props.page)
    })
  }
}