[英]Added StackNavigator to my app project, but I can't make it work with a Class I had
Okay so I had a working app that took some text within a textInput
and changed the state, and returned some alert
with the Object.keys
that matched such criteria.好的,所以我有一个工作应用程序,它在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;
and then I tried to add some stack navigator, but I can't manage to get the Class
to work anywhere.然后我尝试添加一些堆栈导航器,但我无法让Class
在任何地方工作。 I believe the Class
is required to make a Constructor
, but I don't understand this concept very good just yet.我相信Class
是制作Constructor
所必需的,但我还不太了解这个概念。
This is the code I began with, adding StackNavigator
这是我开始的代码,添加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;
I simply do not know how to import the work I've already done in the previous app to this StackNavigator
.我只是不知道如何将我在上一个应用程序中已经完成的工作导入到这个StackNavigator
。 I'll study some more about constructors right now我现在会研究更多关于构造函数的知识
You have a new app.js now which will be the starting point of your app.您现在有一个新的 app.js,它将成为您的应用程序的起点。
So simply rename the Class App as Class HomeScreen and you can use it in the stack navigator like below因此,只需将 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;
You can have any name for the class, the component you provide here will be shown in the stack您可以为类取任何名称,您在此处提供的组件将显示在堆栈中
<Stack.Screen name="Home" component={HomeScreen} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.