Question

我在屏幕上有一个FlatList组件，当我按它时，无法显示详细信息屏幕。

如何获取此组件以将道具推到新的屏幕，以便用户可以执行下一个操作？

当我不将其用作自己视图中的组件时，它可以正常工作。

小吃-https://snack.expo.io/@mattmegabit/stuck

import React from 'react';
import {
  FlatList,
  StyleSheet,
  ActivityIndicator,
  Text,
  View,
  TouchableOpacity,
  Image,
  Button,
  Alert,
} from 'react-native';

import {
  createStackNavigator,
  createBottomTabNavigator,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import moment from 'moment';
import decode from 'parse-entities';

class ShowsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Click an item to see what I mean</Text>
      <GetShows />
      </View>
    );
  }
}

class GetShows extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true, dataSource: null };
  }

  _onPress(item) {
    this.props.navigation.navigate('Details', {
      itemId: item.id,
      title: item.title.rendered,
    });
  }

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity onPress={() => this._onPress(item)}>
        <View style={styles.container}>
          <Text>{decode(item.title.rendered)}</Text>
          <Text>{item.id}</Text>
          <Text>
            Show Dates: {moment(item.show_start_date).format('MMM Do')} -{' '}
            {moment(item.show_end_date).format('MMM Do')}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  componentDidMount() {
    return fetch('https://twinbeachplayers.org/wp-json/wp/v2/show/')
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson,
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this.renderItem}
          keyExtractor={({ id }, index) => id}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const title = navigation.getParam('title', 'no title');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>ItemId: {JSON.stringify(itemId)}</Text>
        <Text>Title: {JSON.stringify(title)}</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const RootStack = createBottomTabNavigator(
  {
    Home: { screen: HomeScreen },
    Shows: { screen: ShowsScreen },
    Details: { screen: DetailsScreen },
  },
  {
    initialRouteName: 'Home',
  }
);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
});

Answer 1

您可以在事件_onPress上使用箭头功能来修复“ this”属性

_onPress = item => {
    this.props.navigation.navigate('Details', {
        itemId: item.id,
        title: item.title.rendered,
    });
}

Answer 2

replaced <GetShows />

with

<GetShows navigation={this.props.navigation} />

解决此问题的另一种方法是在导出组件时与Navigation一起使用。

Answer 3

从“详细信息屏幕”中删除：

    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const title = navigation.getParam('title', 'no title');

并替换为：

componentWillReceiveProps(nextProps) {
    this.setState({
      itemId: nextProps.navigation.getParam("itemId"),
      title: nextProps.navigation.getParam("title"),
    });
  }

FlatList组件导航到新的详细信息屏幕，并在屏幕上传递道具

3 个答案: