当用户单击屏幕上的 json 数据并将符号值传递给另一个类时如何重定向到另一个页面 [英] 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)，例如

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;

这篇关于当用户单击屏幕上的 json 数据并将符号值传递给另一个类时如何重定向到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！