我需要做什么才能使所有 4 个按钮打开不同的新页面

Question

我很新，如果问题描述不好，我很抱歉我有 4 个按钮，我希望每个按钮都有一个不同的页面，在 Press 打开我可以将一个打开的新页面功能绑定到所有四个按钮，但我不能将一个功能绑定到一个按钮，只能绑定到按钮"组"

import React, { Component } from 'react';
import { FlatList, Button, StyleSheet, Text, View } from 'react-native';
import TrainingListItem from '../components/TrainingListItem'
export default class TrainingScreen extends Component {
    render() {
      return (
        
        <View style={styles.container}>
          <FlatList contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}} data={[
            
              { "_id": 1, name: "Disziplin"},
              { "_id": 2, name: "Selbstbewusstsein"},
              { "_id": 3, name: "Selbstwertgefühl"},
              { "_id": 4, name: "Vertrauen"},
          ]}
          keyExtractor={item => item.name} 
          renderItem={
            ({item}) => (
             <TrainingListItem training={item.name} onPress={(id) => {}}/>
            ) 
          }
          ItemSeparatorComponent={() => <View style={styles.listSeparator}/>}/>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      padding: 30,
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    listView: {
      flex: 1,
      justifyContent: 'center',
    },
    listSeparator: {
      padding: 30
    }
  });

Answer 1

好吧，我不太明白，但我会尝试。您想用每个按钮打开不同的页面吗？如果是这样，请使用您的 name 属性来执行此操作，只需将页面调用与按钮中相同的名称即可所以你可以在渲染项中做到这一点

renderItem={
            ({item}) => (
             <TrainingListItem training={item.name} onPress={(id) => {this.gotopage(item.name)}}/>
            ) 
          }

并像这样处理该功能

gotopage(NameOfPage){
//Navigate to page with name NameOfPage
//with react-navigation it will be :
 this.props.navigation.navigate(NameOfPage)
}

这是你想做的吗？