Question

尝试自定义反应导航的tabBar。我创建了一个名为＆＃39; tabComponent＆＃39;的组件。它是在tabNavigator中调用的。我将自定义选项卡作为文本，但它们在一个列下面相互进行。但我希望他们排成一排。下面是我的tabComponent文件。

＆＃13;

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;

＆＃13;

如何将标签显示为单行中的文字就像默认标签一样？

Answer 1

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

<ScrollView horizontal>
    ...
</ScrollView>

为什么flexDirection不会更改为＆＃39; row＆＃39;在tabBarComponent中？

1 个答案: