react-native - 如何在我的 React Native 项目中获取值

Question

我对 RN 完全陌生。我有一些参数总是在变化，但需要在我的项目中的多个屏幕上使用(例如我的本地 api ip 根据我连接的路由器而变化，以及其他几个)那些)。请告诉我一种方法。 我的项目正处于早期阶段，但到最后我将拥有很多屏幕，并且几乎所有屏幕都需要参数。

我当前的屏幕堆栈是:-

标签导航器

• 主堆栈
  • 主屏幕
  • 餐厅屏幕
  • 详细信息屏幕
• 配置文件堆栈
  • 用户屏幕
  • 事件屏幕
  • 密码屏幕
• 设置堆栈
  • 设置屏幕
  • 信息屏幕
  • 联系屏幕

新的屏幕将添加到 TabNavigator 中，并且还将添加新的抽屉，因此仅使用 screenProps 是行不通的。

请帮我通过

我尝试使用函数组件来传递值，但它们作为对象传递，我需要它们作为字符串。

这是我试图传递的一个函数组件

export default function GlobalParams (props){
    const url= "http://192.168.123.1:8000"
    return url
}

这是我尝试导入上述函数的屏幕之一

import React, {Component} from "react";
import { FlatList,StyleSheet,View, Text } from "react-native";
import GlobalParams from "../../GlobalParams";

export default class RestaurantScreen extends Component {
  state = {
    data: [],
    path : '',
  };
  componentDidMount(){
    const url = <GlobalParams />
    this.setState({path: url.toString()+"/backend/restaurant"})
    fetch(this.state.path)
      .then(res => res.json())
      .then(json => this.setState({ data: json }))
      .catch(function(error) {
            console.log('There has been a problem with your fetch operation: ' + error.message);
            console.log(this.state.path)
              throw error;
            });
  }

我收到的“GlobalParams”为“[object Object]”，因此无法使用该网址。

所以请帮忙。

Answer 1

如果您正在寻找可能包含不同组件和文件中可能需要的大量变量的全局配置，我建议使用以下方法。

const baseURL = 'http://192.168.40.108:4000';
const someOtherProperty = 'Some other value';

export {
    baseURL,
    someOtherProperty
}

在您的组件内，您可以简单地要求所需的配置，如下所示:

import {baseURL, someOtherProperty} from './global';

然后您可以在代码中直接引用这些值。

当然，对于生产版本来说，这可能不是最安全的方法，但是随着应用程序的增长，这将完美地适用于您的本地环境。

此外，您不需要在请求值后setState，您可以直接在fetch 调用中使用它们。设置状态会导致不必要的重新渲染。

fetch(`${baseURL}/resource/sub-resource`).then((res) => {
    //.... other operation
})