如何在React Native中将标签栏更改为分段控件？

Question

I am learning react native right now and new to how it works. I am currently tweeking with a project trying to change it up a little. https://github.com/denodenodeno/employee

The project has a tab bar at the bottom, which I want to change to become a segmented control in the top. This is what I have done and received as a result.

Original Code with Tab Bar

import React, {Component} from 'react';
import {
    StyleSheet,
    TabBarIOS
} from 'react-native';
import {bind} from '../utils/utils';
import EmployeesTab from './EmployeesTab';
import SearchTab from './SearchTab';

const employeesIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

class App extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedTab: 'employees'
        };
        bind(this)('_searchOnPress', '_employeesOnPress');
    }

    _employeesOnPress() {
        this.setState({
            selectedTab: 'employees'
        })
    }

    _searchOnPress() {
        this.setState({
            selectedTab: 'search'
        })
    }

    render() {
        return (
            <TabBarIOS
                selectedTab={this.state.selectedTab}>
                <TabBarIOS.Item
                    title="Employees"
                    selected={this.state.selectedTab === 'employees'}
                    icon={{uri: employeesIcon, scale: 3}}
                    onPress={this._employeesOnPress}>
                    <EmployeesTab />
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="Search"
                    selected={this.state.selectedTab === 'search'}
                    systemIcon="search"
                    onPress={this._searchOnPress}>
                    <SearchTab />
                </TabBarIOS.Item>
            </TabBarIOS>
        )
    }
}

Tab Bar

Attempt at Segmented Control

I changed the segment inside the render and return to this

<SegmentedControlIOS
    values={['Employees', 'Search']}
    selectedIndex={0}
    tintColor={'#D6573D'}
    onValueChange={(val) => {
    if (val === "Employees"){
        this._employeesOnPress;
    }
    else if (val === "Search") {
        this._searchOnPress;
    }}}
    onChange={(val) => {
    if (val === "Employees"){
        <EmployeesTab />
    }
    else if (val === "Search") {
        <SearchTab />
    }}}
/>

which gave me this segmented control with nothing else rendered

I'm not understanding the issue. Any help would be appreciated! Thank you

Answer 1

You can't render JSX inside of a prop, instead, you could have the components rendered based on the value in the state. Such as:

<SegmentedControlIOS
    values={['Employees', 'Search']}
    selectedIndex={0}
    tintColor={'#D6573D'}
    onValueChange={(val) => this.setState({ selectedTab: val})}
/>
{this.state.selectedTab === 'Employees' ? <EmployeesTab /> : <SearchTab /> }