为什么 flexDirection 在 tabBarComponent 中没有变成 'row'？

Question

正在尝试自定义react导航的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;

如何将选项卡作为文本显示在一行中就像默认选项卡一样？

Answer 1

ScrollView 有一个名为 horizontal 的道具采用布尔值来设置方向：

<ScrollView horizontal>
    ...
</ScrollView>

为什么 flexDirection 在 tabBarComponent 中没有变成 'row'？

Why flexDirection does not change to 'row' in tabBarComponent?

react-native

react-navigation