gpt4 book ai didi

reactjs - 在 React Native 中添加数据并保存状态

转载 作者:行者123 更新时间:2023-12-04 15:59:13 26 4
gpt4 key购买 nike

我正在构建一个基本的 React Native 应用程序,用户在 TextInput 中输入他的名字,然后按下按钮,他的名字连同他的图像被添加到另一个 View 中的 ScrollView。图像根据人的名字存储和命名。示例 - 名称:“ABC”,从 Assets 中获取的图像将为“ABC.jpg”。

我可以为一个人执行此操作,但每次我添加新条目时,前一个条目都会被覆盖。我怎样才能保留以前的条目并添加另一个条目?

首页

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput} from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
render() {
const { navigation } = this.props;
const name0 = navigation.getParam('name0', 'NO-ID');
return (
<View style={styles.container}>
<ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}>
<Text style={styles.category}>Category 1</Text>


<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<TouchableWithoutFeedback onPress={() => {
this.props.navigation.navigate('Details', {
name: name0,
intro: 'lorem ipsum',
detail1: 'XYZ',
detail2: 'ABC',
});
}}>
<View style={styles.view}>
<Image source={require('./assets/rohit.jpg')} style={styles.image}></Image>
<Text style={styles.text}>{name0}</Text>
</View>
</TouchableWithoutFeedback>
</ScrollView>



</ScrollView>
</View>
)
}
}

添加数据

class AddData extends React.Component {
constructor(props) {
super(props);
this.state = { text: '' };
}
render() {
function onPressLearnMore() {
alert('Hi')
}
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent:'center', alignItems: 'center'}}>
<TextInput
style={{height: 40,width:200}}
onChangeText={(text) => this.setState({input: text})}
/>
<Button
onPress={() => {
this.props.navigation.navigate('Home', {
name0: this.state.input
});
}}
title="Pass Data"
/>

</View>
);
}
}

导航器

const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
Data: AddData
},
{
initialRouteName: 'Data',
}
);

export default class App extends React.Component {
render() {
return <RootStack />;
}
}

Screen 1 Screen 2

最佳答案

因为您没有将用户输入的数据保存在任何地方,只是将其传回原处,所以它会被覆盖,并且当您的代码就位时,它可以正常工作! ;)

简单地在你正在做的事情上贴上创可贴,因为这种传递数据的方法有点禁忌......如果没有某种状态持久性,比如 AsyncStorage,你就无法实现你所要求的,或者......不有两个屏幕。因为每次 React 重新渲染你的屏幕时,你的状态对象中的任何数据都会消失......

在您的 home 组件中,在 did mount 上,您可以将用户输入存储为 state 作为数组中的对象。在下面的示例中,我使用的是您发送回家中的用户数据,但这需要从某种持久性中检索到的数据。

class HomeScreen extends React.Component {
constructor(props) {
super(props)
this.state = {
usersArray: []
}
}
componentDidMount() {
let userInfo = this.props.navigation.getParam('name0', 'NO-ID');
userInfo !== undefined ? this.setState({usersArray:
[...this.state.usersArray, userInfo]}) : console.log('NO USER DATA to add')
}
render() {
const { navigation } = this.props;
const name0 = navigation.getParam('name0', 'NO-ID');
return (
<View style={styles.container}>
<ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}>
<Text style={styles.category}>Category 1</Text>


<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<TouchableWithoutFeedback onPress={() => {
this.props.navigation.navigate('Details', {
name: name0,
intro: 'lorem ipsum',
detail1: 'XYZ',
detail2: 'ABC',
});
}}>
<View style={styles.view}>
<Image source={require('./assets/rohit.jpg')} style={styles.image}></Image>
{/* <Text style={styles.text}>{name0}</Text> */}
{ this.state.usersArray.map((ele, index) => {
return <Text key={index} style={styles.text}>{ele.name}</Text>

})}
</View>
</TouchableWithoutFeedback>
</ScrollView>



</ScrollView>
</View>
)
}
}

请记住,您可能需要更改您的用户数据才能成为此休息和传播工作的对象。

关于reactjs - 在 React Native 中添加数据并保存状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50933662/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com