[英]how to get data according to position in react native
我是React Native的初學者,以下代碼與我的主頁相關,該主頁在行中具有平面列表和視頻項,現在在印刷時,我需要與特定行相關的數據...就像在android中一樣,我們按位置獲取數據。 ..
如何在React Native中根據位置獲取數據
我想實現這樣的目標,將職位從列表視圖傳遞到新活動
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'
}
});
您可以使用renderItem
獲取它
renderItem={({item,index}) => <VideoItem video={item} index={index} />}
在VideoItem.js
您可以使用this.props.index
進行獲取
您可以在此處閱讀有關renderItem
更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.