为了账号安全,请及时绑定邮箱和手机立即绑定

React Native,从另一个屏幕编辑数据

React Native,从另一个屏幕编辑数据

qq_笑_17 2023-04-20 16:39:40
我制作了 2 个屏幕,一个主屏幕和第二个编辑屏幕我需要从编辑屏幕编辑主屏幕的数据并保存它,并且该数据也应该在主屏幕和详细信息屏幕中更新。没有 redux 或上下文我怎么能做到这一点。谁能告诉我。首页.jsclass Home extends Component {  state = {    post: [      {        key: "1",        title: "A Good Boi",        des: "He's a good boi and every one know it.",        image: require("../assets/dog.jpg"),      },    ],  };  render() {    return (        <FlatList          data={this.state.post}          renderItem={({ item }) => (            <>              <TouchableOpacity                activeOpacity={0.7}                onPress={() => this.props.navigation.navigate("Edit", item)}                style={styles.Edit}              >                <MaterialCommunityIcons                  name="playlist-edit"                  color="green"                  size={35}                />              </TouchableOpacity>              <Card                title={item.title}                subTitle={item.des}                image={item.image}                onPress={() => this.props.navigation.navigate("Details", item)}              />            </>          )}        />编辑.jsclass ListDetails extends Component {  render() {    const listing = this.props.route.params;    return (      <View>        <Image style={styles.image} source={listing.image} />        <View style={styles.detailContainer}>          <AppTextInput value={listing.title} />          <AppTextInput value={listing.des} />        </View>        <AppButton          text="Save"          onPress={() => this.props.navigation.goBack("Home")}        />      </View>细节.js const listing = this.props.route.params;    return (      <View>        <Image style={styles.image} source={listing.image} />        <View style={styles.detailContainer}>          <Text style={styles.title}>{listing.title}</Text>          <Text style={styles.des}>{listing.des}</Text>        </View>      </View>    );
查看完整描述

1 回答

?
元芳怎么了

TA贡献1798条经验 获得超7个赞

您可以将主屏幕中的函数传递给编辑屏幕中的setState 。如果导航到编辑屏幕导致主屏幕卸载,您可以将导航方法更改为堆栈导航器的推送(我还没有测试过)。现在的代码应该是这样的:


主屏幕.js:


onEdit=(data)=>{

  setState(...);

}

...

<TouchableOpacity

  activeOpacity={0.7}

  onPress={() => this.props.navigation.navigate("Edit", {item, onEdit})} //use push instead if error occured

  style={styles.Edit}

>

...

编辑.js


class ListDetails extends Component {

  render() {

    const {item:listing, onEdit} = this.props.route.params;

    return (

      <View>

        <Image style={styles.image} source={listing.image} />

        <View style={styles.detailContainer}>

          <AppTextInput value={listing.title} />

          <AppTextInput value={listing.des} />

        </View>

        <AppButton

          text="Save"

          onPress={() => { onEdit(...); this.props.navigation.goBack("Home");}}

        />

      </View>


查看完整回答
反对 回复 2023-04-20

添加回答

代码语言

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信