Question

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

我试过了：

display: inline-block

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

我有一些像这样的技巧https://github.com/react-navigation/react-navigation/pull/1335

但是，它只是点击和发送导航，而不是执行浮动操作按钮

此致查理

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

Answer 2

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

希望可以帮助您。

React Native - React Navigation标签栏 - 自定义浮动操作按钮

2 个答案: