将数据/页面保存到本机反应的列表中

Question

我是新手反应原生并且有问题。

我有两个页面 rockSetting.js 和“myFavoriteSetting.js”。

我想在 rockSetting 页面中有一个 onButtonPress，它在 myFavoriteSettings 页面中创建一个标题为“rock”的列表并链接到 rockSetting 页面。

好吧，基本上我希望能够将列表项添加到另一个文件的列表中。 就像是.. 第 1 页功能：按下按钮时，在第 2 页创建列表项 page 2 : 获取列表项。

我应该如何看待这个问题？

Answer 1

看起来你想在不同的组件（页面）之间共享数据，你实际上可以使用 Flux 或 Redux，但 Redux 是一种基于 Flux 的升级（当然 Redux 可能会更复杂一点），你教程可以看这里，但是会很长，所以你要耐心学习很多关于 Redux 的新定义：

https://egghead.io/courses/getting-started-with-redux

关于 REDUX 的补充说明：

实际上，Flux 和 Redux 都有一个 Store 的定义，它具有某种全局范围，并且是“单一数据源”（意味着只有一个 Store，但当然可以存储很多变量在那个商店）。在您的情况下，您可以先将 Store 中的favoriteData 存储为空白，然后单击 RockSetting 上的 Button 时，将 Store 的 favoriteData 设置为您的数据，然后 MyFavoriteSetting 应该会正确显示。

Redux 和 Flux 会给你很多新的定义和想法，一开始有点复杂，但是在你掌握了架构之后，你就“在那里”，你可以在你的 React/React Native 项目中到处应用它。那里还有很多有趣的地方等着你去发现，请耐心等待，因为这是值得的！

=======================

但是，您仍然可以使用纯反应方式来做到这一点，将 props 从父组件传递到子组件。更详细地说，您可以创建 3 个组件：ParentSetting、RockSetting 和 MyFavoriteSetting，如下所示：

ParentSetting.js

import React from 'react';

class ParentSetting extends React.Component {

  constructor(props) {
    super(props);
    // ...
    this.state = {
      favoriteData: 'no data yet',
    }

  }

  updateFavoriteSetting = () => {
    // We will change state for updating the MyFavoriteSetting component here
    let list_data = "any data you like";
    // actually, you can set an array or object, then we will loop through the object to render data correctly in MyFavoriteSetting. You can also add some react element (which contains some View and Button, just like you described)

    this.setState({
      favoriteData: list_data
    });
  }

  render(){
    // We render the 2 children components: RockSetting and MyFavoriteSetting
    // please consider the way to pass props into those 2 ^^
    return (
      <View>
        <RockSetting updateFavoriteSetting={this.updateFavoriteSetting} />
        <MyFavoriteSetting favoriteData={this.state.favoriteData} />
      </View>
    )
  }
}

RockSetting.js

import React from 'react';

class RockSetting extends React.Component {
  // Please render your button properly, this is just an example of how to bind click function to it
  render(){
    return (
      <Button onClick={this.props.updateFavoriteSetting} />
    )
  }
}

MyFavoriteSetting.js

import React from 'react';

class MyFavoriteSetting extends React.Component {
  // Please render your button properly, this is just an example of how to bind click function to it
  render(){
    return (
      <View>
        {this.props.favoriteData}
      </View>
    )
  }
}

您还可以在使用 React-native 编码之前了解更多关于 React 的信息，它们使用相同的 React 方式

如果您还有问题，请在此处发布并详细说明，我们将尝试一起解决，谢谢