javascript - 如何根据React Native中的位置获取数据

Question

我是 React Native 的初学者，下面的代码与我的主页相关，该主页在行中具有平面列表和视频项目，现在按时我需要与特定行相关的数据......就像我们在 android 中一样，我们获取数据按位置...

如何在React Native中根据位置获取数据

我想实现这样的目标 passing the position from listview to new activity

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  FlatList
} from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import VideoItem from "../src/VideoItem";
import data from "../src/data.json";
import About from "./About";

type Props = {};
export default class Home extends Component {
  render() {
    // alert(data.kind);
    return (
      <View style={styles.container}>
        <View style={styles.Nav}>
          <Image
            source={require("../src/Images/logo.jpg")}
            style={{ width: 98, height: 22 }}
          />
          <View style={styles.RightNav}>
            <TouchableOpacity>
              <Icon style={styles.NavItems} name="search" size={25} />
            </TouchableOpacity>
            <TouchableOpacity>
              <Icon style={styles.NavItems} name="account-circle" size={25} />
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.body}>
          {/* <VideoItem video={data.items[0]} /> */}
          <FlatList
            data={data.items}

            renderItem={video => <VideoItem video={video.item} />}
            keyExtractor={item => item.id}
            ItemSeparatorComponent={() => (
              <View style={{ height: 0.5, backgroundColor: "#E5E5E5" }} />
            )}

          />
        </View>
        <View style={styles.tabBar}>
          <TouchableOpacity style={styles.TabItems}>
            <Icon name="home" size={25} />
            <Text style={styles.TabTitle}>Home</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.TabItems}>
            <Icon name="whatshot" size={25} />
            <Text style={styles.TabTitle}>Trending</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.TabItems}>
            <Icon name="subscriptions" size={25} />
            <Text style={styles.TabTitle}>Subscriptions</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.TabItems}>
            <Icon name="folder" size={25} />
            <Text style={styles.TabTitle}>Library</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  Nav: {
    height: 50,
    backgroundColor: "white",
    elevation: 3,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 15,
    justifyContent: "space-between"
  },
  RightNav: {
    flexDirection: "row"
  },
  NavItems: {
    marginLeft: 20
  },
  body: {
    flex: 1
  },
  tabBar: {
    backgroundColor: "white",
    height: 60,
    borderTopWidth: 0.5,
    borderColor: "#E5E5E5",
    justifyContent: "space-around",
    flexDirection: "row"
  },
  TabItems: {
    justifyContent: "center",
    alignItems: "center"
  },
  TabTitle: {
    fontSize: 11,
    color: "#3c3c3c",
    paddingTop: 4
  }
});

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from "react-native";
import { Actions } from 'react-native-router-flux';
import Icon from "react-native-vector-icons/MaterialIcons";
import VideoComponent from "./VideoComponent ";
import About from "./About";

export default class VideoItem extends Component {

  render() {
    let video = this.props.video;


    // alert(video.etag);
    return (
      <View style={styles.container}>
      <TouchableOpacity onPress={ () => goToAbout()}>
        <Image
          source={{ uri: video.snippet.thumbnails.medium.url }}
          style={{ height: 200 }}
        />

        <View style={styles.Description} >
          <Image source ={{uri:'https://randomuser.me/api/portraits/women/75.jpg'}} style={{width:50,height:50,borderRadius:25}}/>
          <View style={styles.VideoDetails}>
          <Text numberOfLines={2} style={styles.VideoTitle}>{video.snippet.title}</Text>
          <Text style ={styles.Videostatistics}>{video.snippet.channelTitle+"·"+
          nFormatter(video.statistics.viewCount,1)}</Text>
          </View>
          <TouchableOpacity>
            <Icon name="more-vert" size={20}  Color ="#3c3c3c"/>
          </TouchableOpacity>
        </View>
        </TouchableOpacity>
      </View>
    );
  }

}
function nFormatter(num, digits) {
  var si = [
    { value: 1, symbol: "" },
    { value: 1E3, symbol: "k" },
    { value: 1E6, symbol: "M" },
    { value: 1E9, symbol: "G" },
    { value: 1E12, symbol: "T" },
    { value: 1E15, symbol: "P" },
    { value: 1E18, symbol: "E" }
  ];
  var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  var i;
  for (i = si.length - 1; i > 0; i--) {
    if (num >= si[i].value) {
      break;
    }
  }
  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
}



const goToAbout = () => {
  Actions.about()
 }
const styles = StyleSheet.create({
  container: {
    padding: 15
  },
  Description:{
    flexDirection:'row',
    paddingTop:15
  },
  VideoDetails:{
    paddingHorizontal:15,
    flex:1 
  },
  Videostatistics:{
   fontSize:15,paddingTop:3
  },
  VideoTitle:{
    fontSize:16,
    color:'#3c3c3c'
  }
});

Answer 1

您可以通过renderItem获取它

renderItem={({item,index}) => <VideoItem video={item} index={index} />}

在 VideoItem.js 上，您可以使用 this.props.index

获取它

您可以阅读有关 renderItem here 的更多信息