title: what do I need to do that all 4 of my buttons open a different new page
body: <p>Im pretty new to react so sorry if the question is bad described
  i have 4 buttons and I want for each a different page that opens onPress
  I can bind one open new page function to all four buttons but I can't bind one function to one button only to the button "group"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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 (
          
          &lt;View style={styles.container}&gt;
            &lt;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 =&gt; item.name} 
            renderItem={
              ({item}) =&gt; (
               &lt;TrainingListItem training={item.name} onPress={(id) =&gt; {}}/&gt;
              ) 
            }
            ItemSeparatorComponent={() =&gt; &lt;View style={styles.listSeparator}/&gt;}/&gt;
          &lt;/View&gt;
        );
      }
    }
    
  
  
    const styles = StyleSheet.create({
      container: {
        padding: 30,
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      listView: {
        flex: 1,
        justifyContent: 'center',
      },
      listSeparator: {
        padding: 30
      }
    });</code></pre>
  </div>
  </div>
  </p>