当用户单击屏幕上的 json 数据并符号值传递把另类时重定向到另页面
问题说明
我正在使用 react native 和 expo.我在屏幕上有一些 json 数据(模拟 iOS),例如
I am using react native and expo. I have some json data on the screen (similator iOS) such as
A
Acompany
B
Bcompany
这里A是符号,Acompany是名字
here A is symbol and Acompany is name
当用户点击它时,它应该重定向到另一个屏幕,例如 (Stock.js) 并传递 symbol
吗?当用户单击它并发送此数据(symbol
)时,如何将其重定向到另一个屏幕?
When user click on it it should redirect to another screen such as (Stock.js) and pass the symbol
as well? How can I redirect it to another screen when user click on it and send this data (symbol
)?
我的代码:
import React, { useState, useEffect } from "react";
import {
StyleSheet,
View,
TouchableWithoutFeedback,
Keyboard,
FlatList,
TextInput,
Button,
Text,
} from "react-native";
import { useStocksContext } from "../contexts/StocksContext";
import { scaleSize } from "../constants/Layout";
import { Ionicons } from "@expo/vector-icons";
import { ListItem } from "react-native";
export default function SearchScreen({ navigation }) {
const { ServerURL, addToWatchlist } = useStocksContext();
const [state, setState] = useState({
/* initial state here */
myListData: [],
});
const [search, setSearch] = useState("");
useEffect(() => {
renderWithData();
// FixMe: fetch symbol names from the servner and save in local SearchScreen state
}, []);
const updateSearch = (text) => {
setSearch(text);
};
renderWithData = () => {
return fetch("http://131.181.190.87:3001/all")
.then((res) => res.json())
.then((json) => {
setState({
isLoaded: true,
myListData: json,
});
setTimeout(() => {
console.log(state.myListData);
}, 10000);
});
};
let filteredItems = state.myListData.filter((item) => {
return (
item.symbol.toUpperCase().indexOf(search.toUpperCase()) !== -1 ||
item.name.indexOf(search) !== -1
);
});
let movies = filteredItems.map((val) => {
return (
<View key={val.symbol} style={styles.text}>
<Text style={styles.text}>{val.symbol}</Text>
<Text style={styles.text}>{val.name}</Text>
</View>
);
});
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput
style={styles.textinput}
placeholder="Search here"
placeholderTextColor="white"
value={search}
onChangeText={(text) => updateSearch(text)}
/>
<Text>csdn</Text>
<View style={styles.text}>{movies}</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
textinput: {
color: "white",
height: "20",
fontSize: 18,
},
text: {
color: "white",
backgroundColor: "black",
},
flatstuff: {
color: "white",
},
// use scaleSize(x) to adjust sizes for small/large screens
});
正确答案
你必须使用导航库来支持你的应用的导航你可以参考 react-native-navigation 这里
You have to use a navigation library to support the navigation of your app You can refer the react-native-navigation here
一旦您完成了如下所示的基本堆栈设置
Once you have basic stack setup like below
<Stack.Screen name="Home" component={SearchScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
你可以像下面这样导航
navigation.navigate('Details',{text:'123'})
您可以从详细信息屏幕访问如下参数
You can access the params like below from the details screen
const { text } = route.params;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhbigbea
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
希伯来语的空格句子标记化错误
it1352 06-22 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20