search

timomeh / react-native-material-bottom-navigation

πŸ’…πŸ”§πŸ‘Œ a beautiful, customizable and easy-to-use material design bottom navigation for react-native
MIT License
709 stars 127 forks source link

ontabPress doesn't work...maybe becuzof createMaterialTopTabNavigator #127

Closed TrustOne closed 5 years ago

TrustOne commented 5 years ago

What kind of Issue is this? Question / Problem

I'm trying to use this lib, but ontabPress doesn't work,, I can see bottom tabs I made, but press function not working.. maybe because I already use createMaterialTopTabNavigator.. right?/ here is my screen.

Screenshot for reference, code below: image

Here's my code: DetailScreen.js

import React, { Component } from 'react';
import { Picker, Button } from 'native-base'
import {Platform, StyleSheet, Text, View, TouchableOpacity, FlatList, Dimensions, TextInput, Alert } from 'react-native';
import Pdf from 'react-native-pdf';
import firebase from "react-native-firebase";
import { Icon } from 'native-base';
import BottomNavigation, {
FullTab,
Badge
} from 'react-native-material-bottom-navigation'
let uri = 'https://firebasestorage.googleapis.com/v0/b/my-first-login-test.appspot.com/o/user_store%2Ftest2_store%2FStore2.pdf?alt=media&token=90e44134-040b-4934-af91-4e8acaf0098d';
export default class DetailScreen extends Component {
tabs = [
    {
    key: 'games',
    label: 'Games',
    barColor: '#388E3C',
    pressColor: 'rgba(255, 255, 255, 0.16)',
    icon: 'gamepad-variant'
    },
    {
    key: 'movies-tv',
    label: 'Movies & TV',
    barColor: '#00695C',
    pressColor: 'rgba(255, 255, 255, 0.16)',
    icon: 'movie'
    },
    {
    key: 'music',
    label: 'Music',
    barColor: '#6A1B9A',
    pressColor: 'rgba(255, 255, 255, 0.16)',
    icon: 'music-note'
    }

]
    constructor(props) {
        super(props);

        console.log('메인데이타 ' + JSON.stringify(this.props.navigation.getParam('ItemDocID', '123'))) 

        this.ref = firebase.firestore().collection("user_store").doc(this.props.navigation.getParam('ItemDocID', 'Test1')).collection('products');
        this.unsubscribeProducts = null;

        this.state = {
        isSelectView: false,
        activeTab: this.tabs[0].key,
        pickerData: [
            {P_NAME: 'μ œν’ˆμ„ μ„ νƒν•΄μ£Όμ„Έμš”.'}
        ],
        // pickerData: [
        //   {P_NAME: 'μ œν’ˆμ„ μ„ νƒν•΄μ£Όμ„Έμš”.'},{P_NAME: 'μ œν’ˆ1', P_PRICE: 15000, P_QTY: 5}, {P_NAME: 'μ œν’ˆ1', P_PRICE: 15000, P_QTY: 5},{P_NAME: 'μ œν’ˆ1', P_PRICE: 15000, P_QTY: 5},{P_NAME: 'μ œν’ˆ1', P_PRICE: 15000, P_QTY: 5},{P_NAME: 'μ œν’ˆ2', P_PRICE: 15000, P_QTY: 5} ,{P_NAME: 'μ œν’ˆ3', P_PRICE: 15000, P_QTY: 5}
        // ],
        selectedData: {P_NAME: 'μ œν’ˆμ„ μ„ νƒν•΄μ£Όμ„Έμš”.'}, 
        itemList: [],
        storeData: this.props.navigation.getParam('StoreData', {})
        };

    }

    renderIcon = icon => ({ isActive }) => (
        <View>
        <Text>Hello</Text>
    </View>
    )

    renderTab = ({ tab, isActive }) => (
        <FullTab
    isActive={isActive}
    key={tab.key}
    label={tab.label}
    renderIcon={this.renderIcon(tab.icon)}
    />
    )
        // presstab = (newTab) => {
        //   console.log(newTab);

        //   //this.setState({ activeTab: newTab.key })

        // }

    componentDidMount() {
        this.unsubscribe = this.ref.onSnapshot(this.onCollectionProductsSelect);
    }

    onCollectionProductsSelect = querySnapshot => {
        const products = this.state.pickerData.slice();
        querySnapshot.forEach(doc => { 
        products.push(doc.data());
        });

        console.log(JSON.stringify(products))

        this.setState({
        pickerData : products
        });
    }

    updatePickerData(itemIndex) {
        let itemList = this.state.itemList.slice();
        let item = this.state.pickerData[itemIndex];
        let selectedData = Object.assign({}, item);

        console.log('ν…ŒμŠ€'+JSON.stringify(itemList.filter(data => data.P_ID == item.P_ID)))
        // 쀑볡 체크
        if(itemList.filter(data => data.P_ID == item.P_ID).length > 0) {
        Alert.alert('μ€‘λ³΅λœ μ œν’ˆμ΄ μžˆμŠ΅λ‹ˆλ‹€.\n λ‹€μ‹œ ν™•μΈν•΄μ£Όμ„Έμš”.');
        return;
        }

        itemList.push(Object.assign({}, item));

        this.setState({
        selectedData,
        itemList
        });
    }

    renderPicker() {
        return (
        <View style={{ flex: .3, width: '90%', alignItems: 'center', borderWidth: 1, borderColor: '#F80202', marginBottom: 10, backgroundColor: 'white' }}>
            <Picker
            selectedValue={this.state.selectedData.P_NAME}
            style={{ width: '100%', height: '100%' }}
            onValueChange={(itemIndex) => this.updatePickerData(itemIndex)}
            >
            {this.state.pickerData.map((data, itemIndex) => { return (<Picker.Item label={data.P_NAME} value={itemIndex} key={itemIndex} />) })}
            </Picker>
        </View>
        );
    }

    fnChangeInputValue(type, index, value) {

        let list = this.state.itemList.slice();

        switch(type) {
            case 'plus':
                list[index].P_QTY++;
                break;
            case 'minus':
                if (list[index].P_QTY == 1) {
                    alert('μˆ˜λŸ‰μ€ 적어도 1개 이상이어야 ν•©λ‹ˆλ‹€.');
                    return;
                } else {
                    list[index].P_QTY--;
                }
                break;
            case 'input':
                list[index].P_QTY = (value != '' && !isNaN(value)) ? parseInt(value) : 1;
                break;
            case 'delete':
                list.splice(index, 1);
                break;
            default: 
        }

        this.setState({
            itemList : list
        });
    }

    renderItem(item, index) {
        return (
        <View style={{ flex: 1, height: Dimensions.get('window').height * 0.1, borderBottomWidth: 1, borderColor: '#F80202', marginBottom: 10 }}>
            <View style={{ flex: .35, justifyContent: 'center' }}>
            <Text style={{ left: 10 }}>{item.P_NAME}</Text>
            </View>
            <View style={{ flex: .65, flexDirection: 'row' }}>
            <View style={{ flex: .4, flexDirection: 'row', justifyContent: 'space-around' }}>
                <Button style={{ width: '30%', height: '80%', justifyContent: 'center', alignItems: 'center', alignSelf: 'center' }} onPress={() => this.fnChangeInputValue('minus', index)}><Text>-</Text></Button>
                <TextInput
                style={{ width: '30%', height: '80%', justifyContent: 'center', alignSelf: 'center', borderWidth: 1 }}
                underlineColorAndroid='rgba(0,0,0,0)'
                onChangeText={(qty) => this.fnChangeInputValue('input', index, qty) }
                value={item.P_QTY.toString()}
                />
                <Button style={{ width: '30%', height: '80%', justifyContent: 'center', alignItems: 'center', alignSelf: 'center' }} onPress={() => this.fnChangeInputValue('plus', index)}><Text>+</Text></Button>
            </View>
            <View style={{ flex: .6, flexDirection: 'row', justifyContent: 'flex-end'}}>
                <View style={{width: '95%', justifyContent: 'center', alignItems: 'flex-end'}}><Text style={{ right: 10 }}>{item.P_QTY * item.P_PRICE}원</Text></View>
                <Button style={{ width: '15%', height: '80%', justifyContent: 'center', alignItems: 'center', alignSelf: 'center', right: 5 }} onPress={() => this.fnChangeInputValue('delete', index)}><Text>X</Text></Button>
                </View>
            </View>
        </View>
        );
    }

    renderCalcItemView() {
        return (
        <View style={{ flex: .7, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '95%' }}>
            <FlatList
                    data={this.state.itemList}
                    renderItem={({item, index}) => this.renderItem(item, index)}
                    keyExtractor={(item, index) => index.toString()}
                />
        </View>
        );
    }

    renderSelectView() {
        if (this.state.isSelectView) {
        return (
            <View style={{ flex: this.state.itemList.length > 0 ? .45 : 25 }}>
            <View style={{ flex: .14, flexDirection: 'row', width: '100%' }}>
                <View style={{ flex: .43, backgroundColor: 'transparent' }}></View>
                <TouchableOpacity style={{ flex: .14, justifyContent: 'center', alignItems: 'center', borderTopWidth: 1, borderColor: '#585858', borderRightWidth: 1, borderLeftWidth: 1, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#F2F2F2' }} onPress={() => this.setState({ isSelectView: false })}><Text style={{ color: '#F80202', fontWeight: 'bold' }}>V</Text></TouchableOpacity>
                <View style={{ flex: .43, backgroundColor: 'transparent' }}></View>
            </View>
            <View style={{ flex: .86, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F2F2F2' }}>
                <View style={{ flex: .05, flexDirection: 'row', width: '100%' }}>
                <View style={{ flex: .43, borderTopWidth: 1, borderColor: '#585858' }}></View>
                <TouchableOpacity style={{ flex: .14, justifyContent: 'center', alignItems: 'center' }} onPress={() => this.setState({ isSelectView: false })}></TouchableOpacity>
                <View style={{ flex: .43, borderTopWidth: 1, borderColor: '#585858' }}></View>
                </View>
                <View style={{ flex: this.state.itemList.length > 0 ? .7 : .4, width: '100%', justifyContent: 'center', alignItems: 'center' }}>
                <View style={{ flex: this.state.itemList.length > 0 ? .3 : 1, width: '95%', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#F80202', marginBottom: 10, backgroundColor: 'white' }}>
                    <Picker
                    selectedValue={this.state.selectedData.P_NAME}
                    style={{ width: '100%', height: '100%' }}
                    onValueChange={(itemIndex) => this.updatePickerData(itemIndex)}
                    >
                    {this.state.pickerData.map((data, itemIndex) => { return (<Picker.Item label={data.P_NAME} value={itemIndex} key={itemIndex} />) })}
                    </Picker>
                </View>
                {
                    this.state.itemList.length > 0 &&
                    this.renderCalcItemView()
                }
                {/* <FlatList
                    data={this.state.selectedDataList}
                    renderItem={({item, index}) => this.renderPicker(item, index)}
                    keyExtractor={(item, index) => index.toString()}
                /> */}
                </View>
                <View style={{ flex: this.state.itemList.length > 0 ? .25 : .55, width: '100%', flexDirection: 'row', backgroundColor: 'white', borderTopWidth: 1, borderColor: '#585858' }}>
                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
                    <TouchableOpacity activeOpacity={0.5} style={{ flex: .4, height: '70%', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#F80202' }} onPress={() => this.setState({ isSelectView: false })}>
                    <Text style={{ color: '#F80202' }}>μž₯λ°”κ΅¬λ‹ˆ λ‹΄κΈ°</Text>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5} style={{ flex: .4, height: '70%', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F80202' }} onPress={() => this.setState({ isSelectView: false })}>
                    <Text style={{ color: 'white' }}>κ΅¬λ§€ν•˜κΈ°</Text>
                    </TouchableOpacity>
                </View>
                </View>
            </View>
            </View>
        );

        } else {
        return (
            // <View style={{ flex: .15, flexDirection: 'row', borderTopWidth: 1, borderColor: '#585858', backgroundColor: 'white' }}>
            //   <View style={{ flex: .33, justifyContent: 'center', alignItems: 'center' }}>
            //       <Text>{this.state.storeData.S_product}</Text>
            //   </View>
            //   <View style={{ flex: .33, justifyContent: 'center', alignItems: 'center' }}>
            //       <Text>{this.state.storeData.S_product}</Text>
            //   </View>
            //   <View style={{ flex: .33, justifyContent: 'center', alignItems: 'center' }}>
            //     <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#F80202', width: '60%', height: '50%' }} onPress={() => this.setState({ isSelectView: true })}>
            //       <Text activeOpacity={0.5} style={{ color: 'white' }}>κ΅¬λ§€ν•˜κΈ°</Text>
            //     </TouchableOpacity>
            //   </View>
            // </View>
            <View style={{ flex: .15, flexDirection: 'row', borderTopWidth: 1, borderColor: '#585858', backgroundColor: 'white' }}>
            <BottomNavigation
        tabs={this.tabs}
        activeTab={this.state.activeTab}
        onTabPress={newTab => console.log("sssss")}
        renderTab={this.renderTab}
        />
        </View>
        );
        }
    }

    render() {
        const source = {uri:uri,cache:true};
        return (
            <View style={styles.container}>
                    <Pdf
                        source={source}
                        onLoadComplete={(numberOfPages, filePath) => {
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page, numberOfPages) => {
                            console.log(`current page: ${page}`);
                        }}
                        onError={(error) => {
                            console.log(error);
                        }}
                        style={{
                        flex: this.state.isSelectView ? (this.state.itemList.length > 0 ? .55 : 75) : .85,
                        width:Dimensions.get('window').width,
                        backgroundColor: 'white'
                    }} />
                    {this.renderSelectView()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center'
}
});
timomeh commented 5 years ago

Once again, you deleted the issue template. You just kept the first part "What kind of Issue is this? Question / Problem". If a github repo contains an issue template, fill out everything.

maybe because I already use createMaterialTopTabNavigator.. right?

I don't think that's the cause. I couldn't imagine why createMaterialTopTabNavigator interferes with the BottomNavigation. If you think that's the cause, try making a minimum example with https://snack.expo.io/, without all the other components in your screen, and check if onTabPress fires.

Your screen ist very complex, and I think that this is the reason why it's not working. For example, the bottom navigation in your screenshot has no background color. This indicates that something is broken.

Your code is very complex and confusing, and I can't dig into it. You would be better off asking on https://stackoverflow.com.

I don't think this is an issue with the BottomNavigation, so I'm going to close this.