React native 如何在我的项目中获得价值

我对RN完全陌生。我有一些参数总是在变化，但需要在我的项目中的几个屏幕上使用（例如我的本地api ip变化取决于我连接的路由器，以及其他几个）。请告诉我这样做的方法。 我的项目处于早期阶段，但到最后我会有很多屏幕，几乎所有屏幕都需要参数

我当前的屏幕堆栈是：-

选项卡导航器

• 本垒打
  • 主屏幕
  • 餐厅屏幕
  • 详细信息屏幕
• 剖面堆栈
  • 用户屏幕
  • 活动屏幕
  • 密码屏幕
• 设置策略
  • 设置屏幕
  • 信息屏幕
  • 接触屏

较新的屏幕将添加到TabNavigator中，并且还将添加一个新的抽屉，因此仅使用屏幕道具将不起作用

请帮我递过去

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

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

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

import React，{Component}来自“React”；
从“react native”导入{FlatList，StyleSheet，View，Text}；
从“../../GlobalParams”导入GlobalParams；
导出默认类RestaurantScreen扩展组件{
状态={
数据：[]，
路径：“”，
};
componentDidMount（）{
常量url=
this.setState（{path:url.toString（）+“/backend/restaurant”}）
获取（this.state.path）
.then（res=>res.json（））
.then（json=>this.setState（{data:json}））
.catch（函数（错误）{
console.log（'提取操作出现问题：'+error.message）；
console.log（this.state.path）
投掷误差；
});
}

我收到的“GlobalParams”是“[object]”，因此无法使用url

---

因此，请提供帮助。

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

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

---

在应用程序中全局使用变量有两种方法。我想你只想定义一些变量并在整个代码中使用它们。如果我猜第一种解决方案更好。但是如果你想定义一个变量并全局使用该变量，你想在任何组件中更改该变量，那么第二种解决方案是你想要什么

1-您可以使用

global.variable

定义变量，并在项目中的任何地方访问它。例如，在

App.js

文件中，您可以定义

URL

地址，如下所示：

class App extends Component {

    constructor(props){
        super(props);
        global.URL='https://www.google.com';
    }


    render() {

        return (
            <View>
             <ChildComponent/>
            </View>
        );
    }
}

2-使用React上下文：正如我前面所说的，如果你想要一个全局变量，并且可以通过更改它来更新你的应用程序，你可以使用这个方法。我在这里简要地解释一下，但是你可以在这里找到一个很好的文档。上下文可以简单地定义如下：

const AppContext = React.createContext();

现在，如果要在组件中使用此参数，应将其用作提供程序：

class AppProvider extends Component {
    state = {
        number: 10,
    }

    render() {
        return (
            <AppContext.Provider value={this.state}>
            </AppContext.Provider>
        )
    }
}

类AppProvider扩展组件{
状态={
编号：10，
}
render（）{
返回(
)
}
}

现在在ChildComponent中：

   class ChildComponent extends Component {

        render() {    
            return (
               <AppProvider> 
                <View>
                </View>
              </AppProvider> 
            );
        }
    }

class-ChildComponent扩展组件{
render（）{
返回(
);
}
}

---

请投票支持我，这很有帮助：）

正如你所说，参数总是在变化。你可以创建一个类并定义全局变量，这些变量将通过应用程序访问，在getter和setter函数的帮助下，你可以获取或更新值

let url= "http://192.168.123.1:8000"

function setUrl(urlParam) {
  url = urlParam;
}

function getUrl() {
  return url;
}

export default {
  setUrl,
  getUrl
};

创建一个类DataHandler.js

let url= "http://192.168.123.1:8000"

function setUrl(urlParam) {
  url = urlParam;
}

function getUrl() {
  return url;
}

export default {
  setUrl,
  getUrl
};

获取价值

import { getUrl } from './DataHandler';

......

componentDidMount() {
const url = DataHandler.getUrl()
}

import { setUrl } from './DataHandler';

......

componentDidMount() {
DataHandler.setUrl("http://192.168.123.2:8000")
}

设置值

import { getUrl } from './DataHandler';

......

componentDidMount() {
const url = DataHandler.getUrl()
}

import { setUrl } from './DataHandler';

......

componentDidMount() {
DataHandler.setUrl("http://192.168.123.2:8000")
}

---

它不应该是

constURL=GlobalParams（）吗

？但是baseUrl在任何地方都是相同的，在任何地方都没有必要对其进行操作。此外，您始终可以导入默认配置并仅在需要时覆盖其值。是的，这是非常正确的。我只是建议不仅对基本URl使用此方法，而且对所有想要全局的参数也使用此方法。