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

Question

我制作了 2 个屏幕，一个主屏幕和第二个编辑屏幕我需要从编辑屏幕编辑主屏幕的数据并保存它，并且该数据也应该在主屏幕和详细信息屏幕中更新。没有 redux 或上下文我怎么能做到这一点。谁能告诉我。

首页.js

class 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)}

              />

            </>

          )}

        />

编辑.js

class 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>

    );

Answer 1

您可以将主屏幕中的函数传递给编辑屏幕中的setState 。如果导航到编辑屏幕导致主屏幕卸载，您可以将导航方法更改为堆栈导航器的推送（我还没有测试过）。现在的代码应该是这样的：主屏幕.js：onEdit=(data)=>{&nbsp; setState(...);}...<TouchableOpacity&nbsp; activeOpacity={0.7}&nbsp; onPress={() => this.props.navigation.navigate("Edit", {item, onEdit})} //use push instead if error occured&nbsp; style={styles.Edit}>...编辑.jsclass ListDetails extends Component {&nbsp; render() {&nbsp; &nbsp; const {item:listing, onEdit} = this.props.route.params;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; <Image style={styles.image} source={listing.image} />&nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.detailContainer}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AppTextInput value={listing.title} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AppTextInput value={listing.des} />&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; <AppButton&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text="Save"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() => { onEdit(...); this.props.navigation.goBack("Home");}}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </View>