React Native - Наличие разных маршрутов навигации

Question

У меня есть класс с компонентами FlatList, которые имеют пользовательские строки с текстовым полем и изображением. У меня есть оба из них в поле TouchableHighlight, так что поля можно нажимать. Я хочу, чтобы каждое из этих полей TouchableHighlight направлялось на другую страницу, но у меня возникают проблемы при этом. Вот что у меня так далеко:

import React, { Component, PropTypes } from 'react';
import { Platform, Image, Text, View, FlatList, StyleSheet, Button, Alert } from 'react-native';

import WorkoutSelectionRow from './Rows/WorkoutSelectionRow';
import Dimensions from 'Dimensions';




const DEVICE_HEIGHT = Dimensions.get('window').height;

export default class WorkoutSelectionScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            infoSelected: false,
            workoutSelected: 'empty',
        };
    }

    onWorkoutSelect(item){
        this.setState({
            workoutSelected: item.info,
        });
        if(this.state.workoutSelected == 'Beginning'){
            this.props.navigation.navigate('BeginningWorkout', {workout: this.state.workoutSelected});
        }
        if(this.state.workoutSelected == 'Info'){
            this.props.navigation.navigate('WorkoutInfo', {workout: this.state.workoutSelected});
        }
    };

    renderSeparator = () => {
        return (
            <View style={{ height: 1, backgroundColor: "#CED0CE", }} />
        );
    };

    _renderItem = ({item}) => (
        <WorkoutSelectionRow
            title={item.title}
            selected={this.state.workoutSelected}
        />
    );

    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.username}`,
    });

    render() {
        const { params } = this.props.navigation.state;
        var workoutsFB = [
            {title: 'GreySkull LP', key: '1', info: 'empty'},
            {title: 'GZCLP', key: '2', info: 'empty'},
            {title: '5-3-1', key: '3', info: 'empty'}
        ]
        var workoutsSplit = [
            {title: '5-3-1', key: '1', info: 'empty'},
            {title: 'nSuns LP', key: '2', info: 'empty'},
            {title: 'PPL', key: '3', info: 'empty'}
        ]
        return (

            <View style={styles.container}>
                <View style={{ backgroundColor: '#1389FF', height: 50 }}>
                    <Text style={styles.SectionHeaderStyle}>{this.state.workoutSelected}</Text>
                </View>
                <FlatList
                    data={workoutsFB}
                    renderItem={this._renderItem}
                />
                <View style={{ backgroundColor: '#1389FF', height: 50 }}>
                    <Text style={styles.SectionHeaderStyle}>Split Workouts</Text>
                </View>
                <FlatList
                    data={workoutsSplit}
                    renderItem={this._renderItem}
                />
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container:{
        backgroundColor: '#FFFFFF',
    },
    SectionHeaderStyle:{
        backgroundColor : '#1389FF',
        fontSize : 32,
        padding: 5,
        color: '#fff',
    },
    SectionListItemStyle:{
        fontSize : 24,
        padding: 5,
        color: '#000',
        backgroundColor : '#F5F5F5'
    }


});

Вот пользовательский класс строки, использующий React.PureComponent

import React, { Component, PropTypes } from 'react';
import { TouchableHighlight, View, Text, StyleSheet, Image } from 'react-native';

import infoIcon from '../../assets/info-icon.png'

export default class WorkoutSelectionRow extends React.PureComponent {

    onInfoPress(){
        //change param so that previous screen knows to show workout information.
        this.props.selected = 'Info';

    }

    onTextPress(){
        this.props.selected = 'Beginning';
    }

    render() {
        return (

            <View style={{ flex: 1, flexDirection: 'row', height: 50, justifyContent: 'center' }}>
                <TouchableHighlight style={{ flex: 8, marginLeft: 10 }}>
                    <Text style={{ fontSize: 24 }} onPress={() => this.onTextPress()}>{this.props.title}</Text>
                </TouchableHighlight>
                <TouchableHighlight style={{ flex: 2 }}>
                    <Image source={infoIcon} style={{ height: 24, width: 24 }} onPress={() => this.onInfoPress()} />
                </TouchableHighlight>
            </View>

    );
}

}

Вот ссылка на весь мой проект, если это необходимо: https://github.com/JI511/GymRatTracker