在没有 Redux 的 React Native 中添加到全局状态答案

【问题标题】：Add to global state in React Native without Redux在没有 Redux 的 React Native 中添加到全局状态
【发布时间】：2020-10-28 17:23:48
【问题描述】：

import React from 'react';
import {ImageBackground, Image, TouchableOpacity, TextInput, Text, View, Keyboard, } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import styles from "./comp/styles.js"
import listadoPrep from "./comp/list.json";

class HomeScreen extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }
submit(){
  for (let key of Object.keys(listadoPrep)) {
    if(this.state.sueldo <= listadoPrep[key][0]) {
        console.warn("howdoisavethis")
      }
  }
  this.props.navigation.navigate('Screen2', {
  })
}
render(){
return (
<View>
  <ImageBackground source={require("./assets/background.png")} style={styles.background} resizeMode="cover">
    <View style={styles.body}>  
    <Image source={require ('./assets/icon.png')}/>
    <Text style={styles.text}>¿Cuál es tu sueldo bruto?</Text>
    <TextInput style={styles.textInput}
      placeholder="No hace falta que sea exacto, podés redondear ????"
      maxLength={6}
      onBlur={Keyboard.dismiss}
      value={this.state.sueldo}
      onChangeText={(text)=>{this.setState({sueldo:text})}}/>
    <View>
    <TouchableOpacity style={styles.saveButton}
    onPress={()=> {this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
  </ImageBackground>
</View>);}}

function Screen2() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={styles.textofalopa}>☕</Text>
    </View>
  );
}
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{headerShown: false}} />
        <Stack.Screen 
        name="Screen2" 
        component={Screen2}
        options={{headerShown: false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我有一个小应用程序，它接受 textInput 并返回一个数组键。我的目标是拥有一对states（3 或 4）并在 states 满足条件时返回数组键。我不想使用 Redux，因为有人告诉我它对于小型应用程序来说过于复杂。

我看过一些没有用的视频和帖子。来自 Raphael Estrada 的 This solution 对我来说最接近成功，但我无法让 submit() 函数更改 global state 访问 this.state.sueldo 的方式。

我想要另一个屏幕来保存另一个状态，但我无法从外部访问HomeScreen 的state2，所以我想我最好的选择是创建一个全局状态。这可能吗，还是我需要 redux？

【问题讨论】：

不幸的是，由于某种原因，代码没有着色。我会尽量让它更容易阅读

标签： react-native react-redux react-navigation

【解决方案1】：

我想我解决了。我添加我的解决方案以供将来是否有人发现它有用。通过在passing parameters to routes passing parameters to routes中消除类来解决它

class HomeScreen extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }

我替换了每个this.state，并简单地将参数与导航一起传递：

function HomeScreen({navigation}){
  const [text, setText] = useState('');
return (
<View>
     <TextInput style={styles.textInput}
      placeholder=""
      onChangeText={text => setText(text)}
      defaultValue={text}/>
    <View>
    <TouchableOpacity style={styles.saveButton}
    onPress={()=> navigation.navigate('Screen2', {
      bruto: text})}>
      <Text style={styles.saveButtonText}>Next</Text>
    </TouchableOpacity>
</View>);
}

This was the main code I followed and edited to get to the solution

【讨论】：