Question

我制作了两个屏幕，一个主屏幕和第二个编辑屏幕，我需要从编辑屏幕编辑主屏幕的数据并将其保存，并且该数据也应在主屏幕和详细屏幕中更新。我如何在没有redux或上下文的情况下做到这一点。谁能告诉我。

Home.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)}
              />
            </>
          )}
        />

Edit.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>

Details.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 。万一导航到编辑屏幕导致主屏幕卸载，您可以将 navigate 方法更改为堆栈导航器的push（我尚未测试）。现在的代码应如下所示：

HomeScreen.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}
>
...

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>

反应本机，从另一个屏幕编辑数据

1 个答案: