Question

我试图通过单击FlatList中的元素来导航到另一个屏幕（艺术家）。此FlatList包含在_renderListItem方法中设置的Artist实例。到目前为止，我尝试了三种不同的方法（目前有两种方法被注释掉了），但是似乎没有一种方法有效。

方法1：NavigationActions

方法2：this.props.navigation.navigate

方法3：Navigator.push

我设法将参数传递给另一个屏幕，但是不幸的是，导航本身似乎不起作用。我在日志中得到了期望值，但是什么也没发生，并且该应用程序停留在LinksScreen（不更改屏幕）上。

LinksScreen.js

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import Artist  from './Artist';
import { createStackNavigator, withNavigation, NavigationActions } from 'react-navigation';
import {
  ScrollView,
  StyleSheet,
  View,
  Text,
  Image,
  FlatList,
  ActivityIndicator,
  TouchableOpacity,
  TouchableHighlight,
} from 'react-native';

export default class LinksScreen extends React.Component {
  constructor(props) {
    super(props);
    this._onAlertTypePressed = this._onAlertTypePressed.bind(this);
  }

  _onAlertTypePressed(typeId: string, typeName: string, imageUrl: string) {
    console.log(typeId)
    console.log(typeName)
    console.log(imageUrl)

// NavigationActions
    // NavigationActions.navigate({
    //                 routeName: 'Artist',
    //                 params: { itemId: typeId, itemName: typeName, itemImageUrl: imageUrl,},
    //               });

// NAVIGATE
     this.props.navigation.navigate('HomeStack',{},
     {
       type: "Navigate",
       routeName: "Artist",
       params: {
         itemId: typeId,
         itemName: typeName,
         itemImageUrl: imageUrl}
             }
           );

// PUSH
  //     this.props.navigator.push({
  //       screen: 'Artist',
  //       title: 'Artist',
  //       passProps: {
  //         itemId: typeId,
  //         itemName: typeName,
  //         itemImageUrl: imageUrl,
  //       },
  //     });
  }

  _renderListItem = ({item}) => (
    <Artist
      itemId={item.id}
      itemName={item.title.rendered}
      itemImageUrl={
        item.better_featured_image
          ? item.better_featured_image.source_url
          : 'http://54.168.73.151/wp-content/uploads/2018/04/brand-logo.jpg'
      }
      onPressItem={this._onAlertTypePressed}
    />
  );

  static navigationOptions = {
    title: 'Links',
  };

  state = {
    data: [],
    isLoading: true,
    isError: false,
  };

  // static propTypes = {
  //   navigation: PropTypes.shape({
  //     navigate: PropTypes.func.isRequired,
  //   }).isRequired,
  // };

  componentWillMount() {
    fetch('http://54.168.73.151/wp-json/wp/v2/pages?parent=38&per_page=100')
      .then(response => response.json())
      .then(responseJson => {
        responseJson.sort(
          (a, b) => (a.title.rendered < b.title.rendered ? -1 : 1)
        );
        this.setState({
          data: responseJson,
          isLoading: false,
          isError: false,
        });
      })
      .catch(error => {
        this.setState({
          isLoading: false,
          isError: true,
        });
        console.error(error);
      });
  }

// Not used anymore.
  renderRow = item => (
    <View style={styles.grid}>
      <Image
        style={styles.thumb}
        source={{
          uri: item.better_featured_image
            ? item.better_featured_image.source_url
            : 'http://54.168.73.151/wp-content/uploads/2018/04/brand-logo.jpg',
        }}
      />
      <Text style={styles.title}>{item.title.rendered}</Text>
    </View>
  );

  getKey = item => String(item.id);

  renderComponent() {
    if (this.state.isLoading) {
      return <ActivityIndicator />;
    } else if (this.state.isError) {
      return <Text>Error loading data</Text>;
    } else {
      return (
        <FlatList
          numColumns={3}
          contentContainerStyle={styles.elementsContainer}
          data={this.state.data}
          renderItem={this._renderListItem}
          keyExtractor={this.getKey}
        />
      );
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text
          style={{
            fontSize: 20,
            color: '#FFFFFF',
            marginLeft: 4,
            marginTop: 10,
          }}>
          RESIDENTS
        </Text>
        {this.renderComponent()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
  },
  elementsContainer: {
    backgroundColor: '#000000',
  },
  grid: {
    marginTop: 15,
    marginBottom: 15,
    marginLeft: 5,
    height: 125,
    width: 115,
    borderBottomWidth: 1,
    borderBottomColor: '#191970',
  },
  title: {
    color: '#FFFFFF',
    textAlign: 'left',
    fontSize: 12,
  },
  thumb: {
    height: 110,
    width: 110,
    resizeMode: 'cover',
  },
});

Artist.js

_onPress()方法开头的console.log似乎可以正常工作（期望的参数在这里具有正确的值），但是我无法导航到该屏幕。

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

class Artist extends React.PureComponent {

  _onPress = () => {
     // console.log(this.props)

     const itemId = this.props.itemId
     const itemName = this.props.itemName
     const itemImageUrl = this.props.itemImageUrl

    console.log(itemId)
    console.log(itemName)
    console.log(itemImageUrl)

// FOR PUSH
  //   this.props.onPressItem(
  //     this.props.itemid,
  //     this.props.itemName,
  //     this.props.itemImageUrl,
  //   );
  // };
}

  static navigationOptions = {
    title: 'Artist',
  };

  render() {
    return (
      <TouchableOpacity
        {...this.props}
        style={styles.grid}
        onPress={this._onPress}>
        <Image
          style={styles.image}
          source={{uri: this.props.itemImageUrl}}
        />
        <Text style={styles.title}>{this.props.itemName}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#000000',
  },
  grid: {
    marginTop: 15,
    marginBottom: 15,
    marginLeft: 5,
    height: 125,
    width: 115,
    borderBottomWidth: 1,
    borderBottomColor: '#191970',
  },
  title: {
    color: '#FFFFFF',
    textAlign: 'left',
    fontSize: 12,
  },
  image: {
    height: 110,
    width: 110,
    resizeMode: 'cover',
  },
});

export default Artist;

MainTabNavigator.js

也许路由方面有问题，所以这就是我的情况。

import React from 'react';
import { Platform, AppRegistry } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import Artist from '../screens/Artist';

const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Links: {
    screen: LinksScreen,
  },
  Artist: {
    screen: Artist,
  },
});

AppRegistry.registerComponent('ParamsRepo', () => HomeStack);

export default HomeStack;

Answer 1

尝试像这样简单地编写代码：

this.props.navigation.navigate('Artist',
    {
     itemId: typeId,
     itemName: typeName,
     itemImageUrl: imageUrl
    }
});

React Navigation不会更改屏幕

1 个答案: