將 StackNavigator 添加到我的應用程序項目，但我無法使用我擁有的類

Question

好的，所以我有一個工作應用程序，它在textInput一些文本並更改狀態，並返回一些帶有符合此類條件的Object.keys alert 。

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;

第一個應用

然后我嘗試添加一些堆棧導航器，但我無法讓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 App 重命名為 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;

您可以為類取任何名稱，您在此處提供的組件將顯示在堆棧中

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