Question

我正在使用“react-native-scrollable-tab-view”，这是一个很棒的Android＆amp; iOS标签导航。在选项卡的顶部，我想渲染ToolbarAndroid操作，每个选项卡上都有自己的选项。对于例如选项卡一有一个工具栏，其中包含不同的操作图标。我怎么能解决这个问题？

这是我的ScrollableView：

<ScrollableTabView
            renderTabBar={() => <CustomTabBar someProp={'here'} />}>
            <View style={styles.tabView} tabLabel="Page1">
                <Page1View/>
            </View>
            <View style={styles.tabView} tabLabel="Page2">
                <Page2View/>
            </View>       
 </ScrollableTabView>

这是我的CustomTabBar：

var CustomTabBar = React.createClass({

  selectedTabIcons:   [],
  unselectedTabIcons: [],

  propTypes: {
    goToPage:  React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs:      React.PropTypes.array
  },

  renderTabOption( name, page ) {
    var isTabActive = this.props.activeTab === page;

    return (
        <View style={[styles.tab]}>
            <Button key={name} onPress={() => this.props.goToPage(page)}>
                <Text
                    style={{color: !isTabActive ? '#6393B8' : 'white', fontWeight: isTabActive ? 'bold' : 'normal', justifyContent: 'center', alignItems: 'center', fontFamily: VALUES.FONTS.FONT_REGULAR}}>
                    {name}
                </Text>
            </Button>
        </View>
    );
  },

  render() {
    var numberOfTabs      = this.props.tabs.length;
    var tabUnderlineStyle = {
        position:        'absolute',
        width:           deviceWidth / numberOfTabs,
        height:          4,
        backgroundColor: 'white',
        bottom:          0,
    };

    var left = this.props.scrollValue.interpolate({
        inputRange: [ 0, 1 ], outputRange: [ 0, deviceWidth / numberOfTabs ]
    });

    return (
        <View>
            <ToolbarAndroid
                title="TITLE"
                titleColor='white'
                style={styles.toolbar}
                actions={toolbarActions} ==> render this to be updated to actual tab with different Tab actions
            />
            <View style={styles.tabs}>
                {this.props.tabs.map(( tab, i ) => this.renderTabOption(tab, i))}
                <Animated.View style={[tabUnderlineStyle, {left}]}/>
            </View>
        </View>
    );
  },
});

以下是我现在定义的当前toolbarActions的方法：

var toolbarActions = [
    { title: 'Create', icon: require ('image!ic_create_black_48dp'), show: 'always' },
    { title: 'Filter' },
    { title: 'Settings', icon: require ('image!ic_settings_black_48dp'), show: 'always' }
];

Answer 1

这对我有用：

var toolbarActionsForPageOne = [
  { title: 'Option1' },
  { title: 'Option2' },
];

var toolbarActionsForPageTwo    = [
  { title: 'Something1', },
  { title: 'Something2', },
];

然后使用 activeTab属性来识别当前选项卡，并编写一个函数，将其作为参数返回所需的选项：

function toolbarActions ( currentTab ) {

  switch (currentTab) {
    case 0:
        return toolbarActionsPageOne
    case 1:
        return toolbarActionsPageTwo
    }
}

在工具栏Android视图中将其分配给操作：

actions={toolbarActions(this.props.activeTab)}

如何在ToolbarAndroid中为React Native渲染动作

1 个答案: