Почему flexDirection не меняется на «строку» в tabBarComponent?

Попытка настроить tabBar навигации по реакции. Я создал компонент с именем tabComponent, и он вызывается в tabNavigator. Я получаю настраиваемую вкладку в виде текста, но они идут в одном столбце друг под другом. Но я хочу, чтобы они шли в один ряд. Ниже мой файл tabComponent.

import React, { Component } from 'react';
import {View, Text, ScrollView} from 'react-native';
import {NavigationActions} from 'react-navigation';

class tabComponent extends Component{
    navigateToScreen = ( route ) => () => {
        const navigateAction = NavigationActions.navigate({
            routeName: route
        });
        this.props.navigation.dispatch(navigateAction);
    }
    render(){
        return(
            <View style={{flexDirection: 'row'}}>
                <ScrollView style={{flexDirection: 'row'}}>
                        <Text 
                            onPress={this.navigateToScreen('Home')}
                        >
                            Home
                        </Text>
                        <Text onPress={this.navigateToScreen('Search')}>Search</Text>
                        <Text onPress={this.navigateToScreen('Notifications')}>Notifications</Text>
                        <Text onPress={this.navigateToScreen('Message')}>Message</Text>
                </ScrollView>
            </View>
        )
    }
}

export default tabComponent;

Как получить вкладку в виде текста в одной строке как вкладки по умолчанию?


react-native react-navigation
person Arun kumar    schedule 22.02.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

ScrollView имеет реквизит с именем horizontal, принимающий логическое значение для установки направления:

<ScrollView horizontal>
    ...
</ScrollView>
person Dyo    schedule 22.02.2018