将 StackNavigator 添加到我的应用程序项目中，但我无法使用我的 Class

Question

好的，所以我有一个工作应用程序，它在 textInput 中获取一些文本并更改状态，并返回一些 alert 和符合此类条件的 Object.keys。

import React from 'react';
import {ImageBackground, Image, TouchableOpacity, TextInput, Text, View, Keyboard, } from 'react-native';

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

var logo = require ('./assets/icon.png');

class App extends React.Component{
  constructor(){
    super();
    this.state={
      sueldo:'',
    }
  }
submit(){
  for (let key of Object.keys(listadoPrep)) {
    if(this.state.sueldo <= listadoPrep[key][0]) {
        alert(key);
      }
  }
}
render(){
return (
  <View style={styles.container}>
    <ImageBackground source={require("./assets/background.png")} style={styles.background}>
    <View style={styles.body}>
    <Image source={logo}/>
    <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 style={styles.inputContainer}>
    <TouchableOpacity style={styles.saveButton}
      onPress={()=>{this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
    </ImageBackground>
  </View>
  );
}
}


export default App;

First app

然后我尝试添加一些堆栈导航器，但我无法设法让 Class 在任何地方工作。我相信 Class 是制作 Constructor 所必需的，但我还不太了解这个概念。

这是我开始的代码，添加 StackNavigator

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";
var logo = require ('./assets/icon.png');

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我根本不知道如何将我在之前的应用程序中完成的工作导入到此 StackNavigator。我现在将学习更多关于构造函数的知识

Answer 1

您现在有一个新的 app.js，它将成为您应用程序的起点。

因此，只需将 Class 应用程序重命名为 Class HomeScreen，您就可以在堆栈导航器中使用它，如下所示

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]) {
        alert(key);
      }
  }
}
render(){
return (
  <View style={styles.container}>
    <ImageBackground source={require("./assets/background.png")} style={styles.background}>
    <View style={styles.body}>
    <Image source={logo}/>
    <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 style={styles.inputContainer}>
    <TouchableOpacity style={styles.saveButton}
      onPress={()=>{this.submit()}}>
      <Text style={styles.saveButtonText}>Siguiente</Text>
    </TouchableOpacity>
    </View>
    </View>
    </ImageBackground>
  </View>
  );
}
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

您可以为class取任何名称，您在此处提供的组件将显示在堆栈中

 <Stack.Screen name="Home" component={HomeScreen} />

将 StackNavigator 添加到我的应用程序项目中，但我无法使用我的 Class

Added StackNavigator to my app project, but I can't make it work with a Class I had

javascript

class

react-native

stack-navigator