Javascript 如何根据react native中的位置获取数据

我是一个初学者在反应本机，下面的代码是有关我的主页，其中有平面列表和视频项目的行，现在按我需要的数据相关的特定行。。。就像我们在安卓系统中一样，我们通过位置获取数据

如何根据react native中的位置获取数据

我想实现这样的目标

从React导入React，{Component}； 进口{ 站台 样式表， 文本 看法 形象 可触摸不透明度 }来自本地； 从“react native router flux”导入{Actions}； 从react本机矢量图标/材质图标导入图标； 从导入VideoComponent。/VideoComponent； 从导入关于./About； 导出默认类VideoItem扩展组件{ 渲染{ 让视频=this.props.video； //alertvideo.etag； 回来 goToAbout}> {video.snippet.title} {video.snippet.channelTitle+·+ nformaterVideo.statistics.viewCount，1} ; } } 函数信息，数字{ var si=[ {值：1，符号：}， {值：1E3，符号：k}， {值：1E6，符号：M}， {值：1E9，符号：G}， {值：1E12，符号：T}， {值：1E15，符号：P}， {值：1E18，符号：E} ]; 变量rx=/\.0+$\.[0-9]*[1-9]0+$/； var i； 对于i=si.length-1；i>0；i-{ 如果num>=si[i]。值{ 打破 } } 返回num/si[i].value.toFixeddigits.replacerx，$1+si[i].symbol； } const goToAbout==>{ 行动。关于 } const styles=StyleSheet.create{ 容器：{ 填充：15 }, 说明：{ flexDirection:“行”， 加油站：15 }, 视频详情：{ 水平方向：15， 弹性：1 }, 视频统计：{ 字体大小：15，填充顶部：3 }, 视频标题：{ 尺寸：16， 颜色：'3C' } }; 你可以通过renderItem获得它

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

---

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

它抛出的undefined不是在VideoItem.js中评估“video.snippet”console.logthis.props.video的对象，您可以查看所需的数据是否确实存在。

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
  }
});

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