时间戳

首页 > 解决方案 > 将 StackNavigator 添加到我的应用程序项目中，但我无法使其与我拥有的类一起使用

javascript - 将 StackNavigator 添加到我的应用程序项目中，但我无法使其与我拥有的类一起使用

问题描述

好的，所以我有一个工作应用程序，它在 a 中获取一些文本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;

第一个应用程序

然后我尝试添加一些堆栈导航器，但我无法让它在Class任何地方工作。我相信Class制作 a 是必需的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;

我根本不知道如何将我在上一个应用程序中已经完成的工作导入到 thisStackNavigator中。我现在将学习更多关于构造函数的知识

标签： javascriptreact-nativeclassstack-navigator

解决方案

您现在有一个新的 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} />

推荐阅读