Question

我想在按平面列表的每个项目时需要导航到新页面。例如，如果我按Devin，则需要导航至第1页，如果按Jackson，则需要导航至第2页，依此类推，在我的Flatlist中

我不知道如何实现此目标，我尝试使用以下代码，但是此代码不起作用，它显示了“错误提示”找到“变量键”

    if(key == 'Devin)
    {

       // Navigate to new page
    }

我的Home.js文件在下面

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


export class Home extends Component {
onclick_item()
{
  if(key == 'Devin')
  {
    // navigate to Devin page
  }
  else if(key == 'Jackson')
  {
    // navigate to page 2
  }
  else if(key == 'james')
  {
   // navigate to page 3
  }

  }

  render() {
    return (
      <View>
         <FlatList
            data={[
              {key: 'Devin'},
              {key: 'Jackson'},
              {key: 'James'},
              {key: 'Joel'},
              {key: 'John'},
              {key: 'Jillian'},
              {key: 'Jimmy'},
              {key: 'Julie'},
                 ]}
              renderItem={({item}) => <TouchableOpacity onPress={() => this.onclick_item()}><Text>{item.key}</Text></TouchableOpacity>}

   </FlatList>
  </View>
  )
  }
  }

  export default Home

Answer 1

如果您使用开关盒而不是其他情况，则更好，并且您需要将键从组件传递到功能。

import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  item
} from "react-native";

export class Home extends Component {
  onclick_item(key) {
    switch (key) {
      case "Devin":
        //navigate
        break;
      case "Jackson":
        //navigate
        break;
      default:
      //whatever you want
    }
  }

  render() {
    return (
      <View>
        <FlatList
          data={[
            { key: "Devin" },
            { key: "Jackson" },
            { key: "James" },
            { key: "Joel" },
            { key: "John" },
            { key: "Jillian" },
            { key: "Jimmy" },
            { key: "Julie" }
          ]}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={item => this.onclick_item(item.key)}>
              <Text>{item.key}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

export default Home;

Answer 2

您忘了将变量传递给render方法。

尝试以下操作

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


export class Home extends Component {
onclick_item(item) {
  let key = item.key
  if(key == 'Devin')
  {
    // navigate to Devin page
  }
  else if(key == 'Jackson')
  {
    // navigate to page 2
  }
  else if(key == 'james')
  {
   // navigate to page 3
  }

  }

  render() {
    return (
      <View>
         <FlatList
            data={[
              {key: 'Devin'},
              {key: 'Jackson'},
              {key: 'James'},
              {key: 'Joel'},
              {key: 'John'},
              {key: 'Jillian'},
              {key: 'Jimmy'},
              {key: 'Julie'},
                 ]}
              renderItem={
                ({item}) => 
                    <TouchableOpacity 
                       onPress={() => this.onclick_item(item)} 
                    >
                     <Text>{item.key}</Text>
                    </TouchableOpacity>}

          </FlatList>
      </View>
     )
    }
  }

  export default Home

Answer 3

假设您将显示相同类型的数据，则不应为每个项目都创建一个页面。只需建立一个页面并显示您从道具获得的数据即可。例如；

    <View>
      <Text>{item.name}</Text>
      <Text>{item.surname}</Text>
      <Text>{item.number} </Text>
    </View>

，您应将数据发送为

    onclick_item(item) {
navigate("YourScreenKey",{item})
}

如果您还没有选择，我建议使用React Navigation。这是一个教程链接，为您提供有关如何发送数据以及如何获取这些数据https://reactnavigation.org/docs/en/params.html

的详细信息

FlatList导航到新闻项目React Native上的New Screen

3 个答案: