如何使用 react-native 和 redux 创建用于 react-navigation 的按钮列表？

Question

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

下

我有一个目标，为此我需要更多的功能，但我是 React 和 React-Native 的新手，所以我尝试了数小时的前进。但我喜欢反应并慢慢来。但是现在我被卡住了，因为我想用不同的路线目标和特定的参数迭代 json-"Buttons" 列表。

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

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" 是一个保留字或 expo 中与调度相关的其他红屏。当我放置该功能时，我还遇到了导航在 App-Start 上执行的问题。我喜欢将此方法添加到 Button-Component，其中 onPress 仅在按下按钮时起作用。

你能帮助我了解如何解决这个问题吗？

Answer 1

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

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

在上面的示例中，第一个按钮操作将在组件加载后立即调用，但第二个按钮 onPress 函数仅在单击该按钮时调用。

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

如何使用 react-native 和 redux 创建用于 react-navigation 的按钮列表？

How create a button list for react-navigation with react-native and redux?

react-native

react-redux

react-navigation