如何使用 react-native 和 redux 创建用于反应导航的按钮列表？答案

【问题标题】：How create a button list for react-navigation with react-native and redux?如何使用 react-native 和 redux 创建用于反应导航的按钮列表？
【发布时间】：2018-01-21 18:03:46
【问题描述】：

我用导航和 redux 编写了一个可用的 react-native-example 并将其放在 https://github.com/matthiaw/react-native-redux-example/tree/master 下。

我有一个目标，为此我需要更多的功能，但我是反应和反应原生的新手，所以我尝试了几个小时的前进。但我喜欢做出反应，慢慢来。但是现在我被卡住了，因为我想迭代一个带有不同 Route-Goals 和特定参数的“按钮”的 json 列表。

我的问题是我无法替换内部方法

navigateRoles = () => {
  const navigateAction = NavigationActions.navigate({
    routeName: "roles",
    params: { name: "Parameter Roles" }
  });
  this.props.navigation.dispatch(navigateAction);
};

具有类似的功能

buttonNavigator (routeParam, nameParam) {
    const navigateAction = NavigationActions.navigate({
       routeName: routeParam,
       params: { name: nameParam }
    });
    this.props.navigation.dispatch(navigateAction);
}

我可以像这样使用

<Button label="Rollen" routeParam="roles" nameParam="Parameter Roles" />

我总是得到例外，即“this”是一个保留字或世博会中与调度相关的其他红屏。另外，当我放置功能时，我还遇到了在 App-Start 上执行导航的问题。我喜欢将此方法添加到 Button-Component，其中 onPress 仅在按下按钮时起作用。

你能帮我学习如何解决这个问题吗？

【问题讨论】：

你能分享一下你想循环的按钮列表的json结构吗？
当然。这应该是{ "buttons":[ { "label":"Settings", "route":"settings", "param":"set" }, { "label":"Rollen", "route":"roles", "param":"view" }, { "label":"Aufgaben", "route":"tasks", "param":"sorted" }, { "label":"Events", "route":"events", "param":"none" } ] }

标签： react-native react-redux react-navigation

【解决方案1】：

关于启动应用程序时按下的按钮，不要直接在onPress内部调用该函数，而是将其设为箭头函数。

<Button title="ButtonOne" onPress={ console.log("Hello") }/>
<Button title="ButtonTwo" onPress={ () => console.log("World") }/>

在上面的例子中，第一个按钮动作会在组件加载后立即被调用，而第二个按钮的 onPress 函数只有在该按钮被点击时才会被调用。

【讨论】：

好的，你能举个例子，我将两个或三个参数传递给内部箭头函数吗？我试过这个，但由于NavigationActions，我总是遇到异常。这是全局导入的（参见代码），但它在箭头函数中不起作用。
<Button title="ButtonTwo" onPress={ (<placePropsHere>) => console.log("World") }/>

【解决方案2】：

我花了很多时间反复试验，直到我找到了一个无一例外的解决方案。您可以在 https://github.com/matthiaw/react-native-redux-example/blob/master/src/Components/home.js 找到完整的工作示例。

按钮数据的作用

var data = JSON.parse(`{
"buttons": [
  {
    "label": "Rollen",
    "description" : "Eine Liste aller Rollen",
    "route": "roles",
    "param": "Roles Param (Iterated)"
  },
  {
    "label": "Einstellungen",
    "description" : "Einstellungen von Circlead",
    "route": "settings",
    "param": "Settings Param (Iterated)"
  },
  {
    "label": "Leer",
    "description" : "Eine leere Seite",
    "route": "empty",
    "param": "Empty Param (Iterated)"
  }
]
}`);

是组件

class Button extends Component {
render() {
return (
  <TouchableOpacity
    style={Styles.circleadMainMenuItem}
    onPress={ this.props.onPress }
  >
  <Text style={Styles.circleadMenuTitle}>
    {this.props.label}
  </Text>
  <Text style={Styles.circleadMenuDescription}>
    {this.props.description}
  </Text>
 </TouchableOpacity>
)
}
}

与

renderButton(button, navigation) {
return (
  <Button key={button.label} label={button.label+" (Iterated)"} description="Liste aller Rollen" onPress={ () => {
    const param = button.param;
    const route = button.route;
    const navigateAction = NavigationActions.navigate({
      routeName: route,
      params: { name: param }
    });
    navigation.dispatch(navigateAction);
  }} />
)
}

可以搭配使用

{ data.buttons.map(button => this.renderButton(button, this.props.navigation)) }

【讨论】：