Question

我希望能够为我的底部选项卡（提醒）的图标之一设置徽章，但是我不知道如何传递值，以便徽章将显示提醒屏幕上给出的值中的数字。< / p>

那么我将如何处理呢？我对反应导航的工作方式非常困惑。任何帮助将非常感激！谢谢！

在App.js中

const TabStack = createBottomTabNavigator(
  {
    Home : { screen: HomeStack },
    Reminders: { screen: ReminderStack,
      navigationOptions: ({ screenProps }) => ({
        tabBarIcon: ({tintColor}) =>
        <View style={{flexDirection: 'row',alignItems: 'center',justifyContent: 'center',}}>
        <IconBadge
          MainElement={
            <View style={{
              marginRight:15
            }}>
            <Ionicons name={`ios-alarm`} size={30} color={tintColor} />
          </View>

          }
          BadgeElement={

            <Text style={{color:'#FFFFFF'}}>{screenProps.notifCount}</Text>
          }
          Hidden={true}
          IconBadgeStyle={
            {width:20,
            height:20,
            backgroundColor: 'red'}
          }

          />
      </View>

      })

    },
  },

  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-home`;
        } else if (routeName === 'Reminders') {
          iconName = `ios-alarm`;
        }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#0892d0',
      inactiveTintColor: 'gray',
    },
  }
);

在ReminderScreen.js中

import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet,Image,ScrollView,Dimensions} from 'react-native';
import { ListItem, withBadge,Badge, } from 'react-native-elements';
import { Container, Header, Tab, Tabs, ScrollableTab } from 'native-base';
import R_Equipment from './rEquipmentTab';
import R_Room from './rRoomTab';
import axios from 'axios';


  export default class ReminderScreen extends React.Component {

    render() {

      return (
        //I want to pass a notifCount variable back to Tabstack
        //e.g. notifCount = 5
        <Container>

        <Tabs  renderTabBar={()=> <ScrollableTab />}>
          <Tab heading="Rooms">
            <R_Room navigation={this.props.navigation} />
          </Tab>
          <Tab heading="Equipment">
            <R_Equipment navigation={this.props.navigation} />
          </Tab>

        </Tabs>
      </Container>


      );
    }
  }
  const styles = StyleSheet.create({
    displayImage: {
      height: 50,
      width: 100,
      borderRadius: 10,

    },
  });

Answer 1

您可以将其作为父级发送给孩子，也可以使用state，如果更简单，则可以使用Redux

//这使用vanilla.js或通用状态

<YourComponent = badgeData={this.state.badgedata} />

//在您的第二堂课/孩子中，获取数据作为道具

this.props.badgeData

或更详细地说，您不能点击以下链接：

Here

我该如何将价值从屏幕传递到底部标签图标徽章？

1 个答案: