底部导航栏图片
程序员文章站
2022-07-16 14:42:36
...
底部导航栏自定义图片
createBottomTabNavigator
createTabNavigator
, { navigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, tintColor }) => { const { routeName } = navigation.state; if (routeName === "Home") { if (focused) { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/b5.png")} /> ); } else { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/a5.png")} /> ); } } else if (routeName === "News") { if (focused) { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/b2.png")} /> ); } else { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/a2.png")} /> ); } } else if (routeName === "My") { if (focused) { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/b3.png")} /> ); } else { return ( <Image style={{ width: 30, height: 30 }} source={require("./img/a3.png")} /> ); } } } }) }