javascript - 在本机反应中将数据传递给模态
问题描述
模式中的其他目的需要从 api 获取的数据。我如何将数据传递{currency.data.prices[index].instrument}
{currency.data.prices[index].closeoutAsk}
{currency.data.prices[index].closeoutBid}
给同一组件中的模态组件。下面是代码:
//HomeScreen
import React, {useContext, useState} from 'react'
import { Text, View, ScrollView, TouchableOpacity, Modal, TextInput } from 'react-native'
import {ListItem, Card, Button, Icon} from 'react-native-elements'
//import CurrencyPair from '../../CurrencyPair'
import {firebase} from '../../../firebase/config'
import {CurrencyContext} from '../../../context/Context'
import styles from '../LoginScreen/styles'
function HomeScreen() {
const currency = useContext(CurrencyContext);
const [modalopen, setModalOpen] = useState(false)
return (
<ScrollView>
<Modal
visible={modalopen}
animationType={"fade"}
>
<View style={styles.modal}>
<View>
<Text style={{textAlign: "center", fontWeight: "bold"}}>
CreateAlert
</Text>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
<Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<Card>
<Text style={{textAlign: "center"}}>
Welcome
</Text>
<Button title="Sign Out" type="outline" onPress ={() => firebase.auth().signOut()}/>
<Button title="My Alerts" onPress ={() =>navigation.navigate("AlertScreen") }/>
</Card>
<View>
{currency.data.prices && currency.data.prices.map((prices, index) => {
return (
<ListItem
key={index}
onPress = {() => setModalOpen(true)}
bottomDivider>
<ListItem.Content>
<ListItem.Title>
{currency.data.prices[index].instrument} {currency.data.prices[index].closeoutAsk} {currency.data.prices[index].closeoutBid}
</ListItem.Title>
</ListItem.Content>
</ListItem>
)
})
}
</View>
</ScrollView>
)
}
export default HomeScreen
//语境
import React, {createContext, useState, useEffect}from 'react'
import {ActivityIndicator} from 'react-native'
import axios from '../utils/axios'
const CurrencyContext = createContext();
const CurrencyProvider =(props) => {
const [data, setData] = useState([])
const [isLoading, setIsloading] = useState(true)
useEffect(() => {
const interval = setInterval(() => {
const fetchpairs = async() => {
const results = await axios.get('/v3/accounts/101-004-14328428-002/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
setData(results.data)
setIsloading(false)
}
fetchpairs()
},1000)
}, []);
if(isLoading) {
return (
<ActivityIndicator size="large"/>
)
}else
return (
<CurrencyContext.Provider
value={{
data,
setData,
isLoading,
setIsloading
}}>
{props.children}
</CurrencyContext.Provider>
)
}
export {CurrencyProvider, CurrencyContext}
解决方案
您可以创建另一个状态变量来存储单击的索引。
const [clickedIndex, setClickedIndex] = useState(0);
然后在 onPress 事件中使用它。
onPress = {() => {setModalOpen(true);setClickedIndex(index);}
然后您可以使用相同的索引在模态中显示您想要的内容。
<Modal
visible={modalopen}
animationType={"fade"}
>
<View style={styles.modal}>
<View>
<Text style={{textAlign: "center", fontWeight: "bold"}}>
{currency.data.prices[clickedIndex].instrument}
</Text>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
<Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
推荐阅读
- node.js - 如何发布多个数组Nodejs
- mysql - 如果密钥存在如何更新,否则插入
- ecmascript-6 - 破坏 Parse.Object 实例
- java - Android 许可证状态未知。尝试重新安装或更新您的 Android SDK 管理器
- spring-boot - 在 Spring Boot 2 中,如何自动生成数据库并将模式生成命令记录到文件中?
- node.js - 构建成功时无法将我的应用程序部署到 Heroku 空白页面和控制台错误?
- r - 在 R 中操作数据帧、标记错误并返回新数据集
- swift - 如何在初始化后自动异步设置现有结构的新属性?
- javascript - 如何使用来自 React Router 和 Redux 的 Props 从服务器获取数据
- mongoose - 在执行查询之前验证