如何在用户单击屏幕上的 json 数据并将符号值传递给另一个 class 时重定向到另一个页面
How to redirect to another page when user click on json data on screen and pass symbol value to another class
我正在使用 React Native 和 Expo。我在屏幕上有一些 json 数据(模拟器 iOS),例如
A
Acompany
B
Bcompany
这里A是符号,Acompany是名字
当用户点击它时,它应该重定向到另一个屏幕,例如 (Stock.js) 并传递 symbol
吗?当用户单击它并发送此数据时,如何将其重定向到另一个屏幕 (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 here
一旦你有了如下所示的基本堆栈设置
<Stack.Screen name="Home" component={SearchScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
您可以像下面这样导航
navigation.navigate('Details',{text:'123'})
您可以从详细信息屏幕访问如下参数
const { text } = route.params;
我正在使用 React Native 和 Expo。我在屏幕上有一些 json 数据(模拟器 iOS),例如
A
Acompany
B
Bcompany
这里A是符号,Acompany是名字
当用户点击它时,它应该重定向到另一个屏幕,例如 (Stock.js) 并传递 symbol
吗?当用户单击它并发送此数据时,如何将其重定向到另一个屏幕 (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 here
一旦你有了如下所示的基本堆栈设置
<Stack.Screen name="Home" component={SearchScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
您可以像下面这样导航
navigation.navigate('Details',{text:'123'})
您可以从详细信息屏幕访问如下参数
const { text } = route.params;