Question

我使用navigation和redux编写了一个有效的react-native-example示例，并将其放在https://github.com/matthiaw/react-native-redux-example/tree/master下。

我有一个目标，因为我需要更多的功能，但我是新的反应和反应原生，所以我尝试了几个小时前进。但我喜欢反应并花时间。但现在我被困了，因为我想迭代一个json-list＆＃34; Buttons＆＃34;具有不同的路线目标和特定的参数。

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

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" />

我总是得到例外，＃34;这个＆＃34;是世博会中的保留字或其他红色屏幕，与调度相关。此外，我遇到的问题是，当我放置功能时导航在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创建反应导航的按钮列表？

2 个答案: