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

Question

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

这是我的 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>
    );
  },
});

这是我当前的工具栏操作现在是如何定义的：

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
    }
}

在您的 ToolbarAndroid 视图中将其分配给 actions：

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