当用户单击屏幕上的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.我在屏幕上(类似iOS)在屏幕上有一些json数据，例如

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
});

推荐答案

您必须使用导航库来支持应用程序的导航 您可以在此处

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屋！