React native - 底部菜单上没有图标答案

【问题标题】：React native - No Icons on bottom menuReact native - 底部菜单上没有图标
【发布时间】：2023-03-11 12:48:01
【问题描述】：

我正在尝试创建底部菜单流程，但我不明白我需要如何以及在何处设置底部菜单的图标

目前我已经设置了菜单，它可以工作，我可以个性化菜单名称，但无法设置图标。我从 navigationOptions 开始，然后在组件的扩展中更改类之前它可以工作。

以下代码在我的 App.js 文件中

const switchNavigator = createSwitchNavigator({
    loginFlow: createStackNavigator({
        Signin: SigninScreen,
        Signup: SignupScreen
    }),
    mainFlow: createBottomTabNavigator({
        /*Spogliatoio: createStackNavigator({
            Game: GameScreen,
        }),*/
        Rosa: createStackNavigator({
            Team: TeamScreen,
            PlayerDetail: PlayerDetailScreen,

        }),
        Classifica: createStackNavigator({
            LeagueTable: LeagueTableScreen,
        }),
        Calendario: createStackNavigator({
            LeagueCalendar: LeagueCalendarScreen,
        }),
        /*Carriera: createStackNavigator({
            Trainer: TrainerScreen,
        }),*/
    }),
});

const App = createAppContainer(switchNavigator);

export default () => {
    return (
        <AuthProvider>
            <App ref={(navigator) => {setNavigator(navigator)}}/>
        </AuthProvider>
    );
};

我的菜单视图中的一类如下

export default class LeagueTableScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
            nomeSquadra:''
        }
    }

    componentDidMount() {
        this.fetchData()
            .catch((error) => {
                //console.log(`Error: ${error}`)
            });
    }

    render() {

        const { state, navigate } = this.props.navigation;
        const teamName = this.state.nomeSquadra;


        if (this.state.isLoading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator/>
                </View>
            )
        } else {
            return (
                <>
                    <SafeAreaView style={styles.container}>
                        <View style={styles.listItem}>
                            <Text style={styles.itemTeamName}>Nome Squadra</Text>
                            <Text style={styles.itemLegueDetail}>PG</Text>
                            <Text style={styles.itemLegueDetail}>V</Text>
                            <Text style={styles.itemLegueDetail}>P</Text>
                            <Text style={styles.itemLegueDetail}>S</Text>
                            <Text style={styles.itemLegueDetail}>+/-</Text>
                            <Text style={styles.itemLegueDetail}>RF</Text>
                            <Text style={styles.itemLegueDetail}>RS</Text>
                            <Text style={styles.itemLegueDetail}>PT</Text>
                        </View>
                        <FlatList style={styles.flatl}
                                  data={this.state.dataSource}
                                  keyExtractor={(item) => item.idSquadra}
                                  renderItem={({item}) => {
                                      return(
                                          <TouchableOpacity >
                                              <LegueViewItem item={item} nomeSquadra={teamName}/>
                                          </TouchableOpacity>
                                      )
                                  }}
                        />
                    </SafeAreaView>
                </>
            )
        }
    }
}

LeagueTableScreen['navigationOptions'] = () => ({
    title: 'Classifica',
    tabBarIcon: <SimpleLineIcons name="people" size={18}  />
})

谁能帮我设置底部菜单的图标？

非常感谢您！

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

终于找到答案了^^

createStackNavigator 为您提供了一个 stackConfig 选项，您可以在那里实现 NavigationOprions。所以我只需要使用以下结构定义我的 createStackNavigator

Rosa: createStackNavigator({
        Team: TeamScreen,
        PlayerDetail: PlayerDetailScreen,
    }, {navigationOptions: {tabBarIcon: <SimpleLineIcons name="people" size={18} />}
    }),

我希望这可以帮助一些正在试验 React-Native 的新开发人员：D

【讨论】：