React Native - React 导航选项卡栏 - 自定义浮动操作按钮答案

【问题标题】：React Native - React Navigation Tab Bar - Custom floating action buttonReact Native - React 导航选项卡栏 - 自定义浮动操作按钮
【发布时间】：2018-01-11 15:12:30
【问题描述】：

我需要一些帮助才能使用 React Native - react 导航库。它是标签栏，但上传按钮充当浮动操作按钮。

我试过了：

const click = () => {
  console.log('click');
  return (
    <View>
      <Text>a</Text>
    </View>
  );
};

tabBarOnPress: (tab) => {
  click();
},

// Main Page Navigator
export const Main = TabNavigator({
  Home: {
    screen: HomeNavigator,
  },
  Explore: {
    screen: ExploreNavigator,
  },
  Upload: {
    screen: UploadMain,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Upload',
      tabBarIcon: ({ tintColor }) => (
        <View>
          <Icon name="camera" size={26} color={tintColor} />
        </View>
      ),
      tabBarOnPress: (tab) => {
        click();
      },
    }),
  },
}, {
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  backBehavior: 'none',
  swipeEnabled: false,
  lazy: true,
  animationEnabled: false,
  showIcon: true,
  tabBarOptions: {
    activeTintColor: 'black',
  },
});

上传按钮需要充当浮动操作按钮，当它点击时，它已经记录，但不渲染组件。创建浮动操作按钮的任何解决方法？

我有一些类似https://github.com/react-navigation/react-navigation/pull/1335的技巧

但是，它只是点击和调度导航，不做浮动操作按钮

问候，查理

【问题讨论】：

标签： javascript android react-native react-navigation floating-action-button

【解决方案1】：

您应该将此代码写入您的组件！

-- 你可以使用'react-native-tab-navigator'--

import TabNavigator from 'react-native-tab-navigator';

...
render(){
        // console.log('TabRouter this.state:',this.state);
        let tabs = [<Home {...this.props}/>,<Chat {...this.props}/>,<Web {...this.props}/>,<User {...this.props}/>];
        let a = this.state.loginData.tabList.map((item,key)=>{
            // console.log('item:',item);
            return(
                <TabNavigator.Item
                    key={key}
                    selected={this.state.selectedTab === item.type}
                    title={item.name}
                    renderIcon={() => <Image source={{uri:item.iconUnselectedUrl}} style={{width:24,height:24,}}/>}
                    renderSelectedIcon={() => <Image source={{uri:item.iconSelectedUrl}} style={{width:24,height:24}} />}
                    badgeText={this.state.tabBadge}
                    onPress={() => this.setState({
                        selectedTab: item.type,
                        tabBadge:0,
                    })}
                >
                    {tabs[key]}
                </TabNavigator.Item>
            )
        });
        // console.log('a:',a);
        return(
            <TabNavigator
                hidesTabTouch={true}
                sceneStyle={{backgroundColor:'#fff'}}>
                {a[0]}
                {a[1]}
                <TouchableOpacity
                    key={'add'}
                    style={{}}
                    renderIcon={() => <View style={{borderRadius:5,backgroundColor:'#46aee3',
                        width:width/5,height:49,justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:49,padding:0,color:'#ffffff',backgroundColor:'rgba(0,0,0,0)'}}>+</Text></View>}
                    onPress={()=>this.props.navigation.navigate('SendBlog')}
                />
                {a[2]}
                {a[3]}
            </TabNavigator>
        )
    }
...

-- 2018/01/22 更新--

我觉得你应该

let that;
class UploadMain extends Component {
    constructor(props){
        super(props);
        that = this;
        this.state = {
            change:false,
        };
    }

    changeState = () => {
        this.setState({change:!change});
    };

    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Upload',
      tabBarIcon: ({ tintColor }) => (
        <View>
          {that.state.change ? <Text>loading...</Text>:<Icon name="camera" size={26} color={tintColor} />}
        </View>
      ),
      tabBarOnPress: () => {
        that.changeState;
      },
    }),

    render(){
        return (
            <View>
                ....
            </View>
        )
    }
}

【讨论】：

嗨，谢谢，但我的意思是创建自定义标签栏组件。看起来 tabBarComponent 可以设置为自定义组件。谢谢

【解决方案2】：

如果您使用的是 react-navigation 5.x 版本，则应使用tabBarButton 进行修改。您可以阅读的代码详细信息 https://medium.com/@my.maithi/react-native-navigation-add-custom-button-in-the-middle-of-tabbar-6c390201a2bb

希望能帮到你。

【讨论】：