Как передать данные в реагировать на родной FlatList в качестве реквизита при навигации по экранам - PullRequest
Новая
       1

Как передать данные в реагировать на родной FlatList в качестве реквизита при навигации по экранам

0 голосов
/ 16 января 2019

Я создаю список данных с использованием реагирующего нативного FlatList, в навигаторе RootStack, передавая компонент FlatList как домашний экран, а компонент Details - как подробный экран. Я хочу, чтобы на подробном экране отображались динамические данные, независимо от того, какой идентификатор и текст элемента плоского списка будут отображаться на подробном экране. Я знаю, как перейти к новому экрану, но не могу понять, как передать данные о состоянии компонента List в качестве реквизитов для компонента Details.

Я также получаю сообщение об ошибке "Ошибка типа дочернего контекста".

Надеюсь, мне ясно. Уже три часа я пытаюсь решить эту проблему. Это было бы так мило с вашей стороны, если бы вы помогли мне разобраться с этой проблемой. 

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class List extends Component {
  state = {
    rows: [
      { id: 0, text: 'View' },
      { id: 1, text: 'Text' },
      { id: 2, text: 'Image' },
      { id: 3, text: 'ScrollView' },
      { id: 4, text: 'ListView' }
    ]
  };

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate(
            'Details',
            {
              /*how to pass data here*/
            }
          )}
      >
        <Text style={styles.row}>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  render() {
    const extractKey = ({ id }) => id;
    return (
      <FlatList
        style={styles.container}
        data={this.state.rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The id is {this.props.id} /*how to get data here*/</Text>
        <Text>you are in {this.props.text} /*how to get data here*/</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator({
  List: List,
  Details: DetailsScreen
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue'
  }
});

Вы можете получить немедленный результат, вставив этот код в Expo

1 Ответ

0 голосов
/ 16 января 2019 
 <TouchableOpacity
    onPress={() =>
      this.props.navigation.navigate(
        'Details',
        {
          /*how to pass data here*/
          Name:'Jhon Lennon',
          Age: 58 
          Male: true
        }
      )}
  >

В подробностях экран 

class DetailsScreen extends React.Component {

  componentDidMount() {
     this.getInfo();
  }

  getInfo(){
  //you can do it this way or access it directly 
  //var Name =this.props.navigation.getParam('Name ', 'No Name'); //second parameter is a callback
  //var Age=this.props.navigation.getParam('Age', 20);
  //var Male=this.props.navigation.getParam('Male', false);
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The Name is {this.props.navigation.state.params.Name||'NoName'} /*NoName is also a callback*/</Text>
        <Text>you are {this.props.navigation.state.params.Age||'0'} years old /*0 is the callback*/</Text>
      </View>
    );
  }
}

Подробнее здесь

Кроме того, вам следует избегать наматывания корневого навигатора внутри компонента 

const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

должно быть просто 

export default createAppContainer(RootStack);
...