Fatal编程技术网
  • react-native/
  • React native 如何在CreateBoottomTabNavigator中获取背景图像？

React native 如何在CreateBoottomTabNavigator中获取背景图像？

react-native

React native 如何在CreateBoottomTabNavigator中获取背景图像？,react-native,react-navigation,React Native,React Navigation,我一直在尝试为tabbar获取背景图像。我尝试使用tabBarComponent，但它将选项卡隐藏在它下面 我使用的代码是 export default MainNavigation = createBottomTabNavigator( { Profile:{ screen: Profile, navigationOptions: ({ navigation }) => ({ t

我一直在尝试为tabbar获取背景图像。我尝试使用
tabBarComponent
，但它将选项卡隐藏在它下面

我使用的代码是

   export default MainNavigation = createBottomTabNavigator(
    {
        Profile:{
            screen: Profile,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, tintColor }) => {
                    return <Image source={require('./images/tab_explore.png')} />
                }
            }),
        }
    },

    {
        tabBarComponent: props =>{
            return(
                <View style={{backgroundColor:"black"}}> 
                <Image
                    style={{ width:'100%', height: 80 }}
                    source={ require('./images/bottom_btn.png')} />
                </View>
            );
        }
    })

export default MainNavigation=createBottomTabNavigator(
{
简介：{
屏幕：配置文件，
导航选项：（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
返回
}
}),
}
},
{
tabBarComponent:props=>{
返回(
);
}
})
有人知道如何解决这个问题吗？提前谢谢

电流输出：


它应该在橙色的顶部显示选项卡。

也许为时已晚，但我希望这个答案能帮助很多人。在React Navigation version 2中，您可以这样做：

从'react navigation tabs'导入{createBottomTabNavigator，BottomTabBar}

如果已安装“react navigation”，则无需安装react navigation选项卡。
然后通过
consttabbarcomponent=（props）=>（）创建TabBarComponent。您将使用
tabBarComponent
输入
createBottomTabNavigator
。背景颜色：默认标签的“透明”，瞧

下面的代码将告诉您主要的想法


export const Tabs = createBottomTabNavigator({
    Posters: { 
        screen: Posters,
        navigationOptions: {
            tabBarLabel: 'AFİŞA',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="local-movies" size={24} color={tintColor} />
            )
        }
    },
    ComingSoon: { 
        screen: ComingSoon,
        navigationOptions: {
            tabBarLabel: 'TEZLİKLƏ',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="movie" size={24} color={tintColor} />
            )
        }
    },
    Tickets: { 
        screen: Tickets,
        navigationOptions: {
            tabBarLabel: 'BİLETLƏR',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="confirmation-number" size={24} color={tintColor} />
            ),

        }
    },
    More: { 
        screen: More,
        navigationOptions: {
            tabBarLabel: 'MENU',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="more-horiz" size={24} color={tintColor} />
            ),
            tabBarOnPress: ({ navigation }) => {
                return <Text>sd</Text>
            }
        }
    },


}, 
{
    order: ['Posters', 'ComingSoon', 'Tickets', 'More' ],


    tabBarOptions: {
      activeTintColor: colors.darkYellow(),
      inactiveTintColor: 'white',
      labelStyle: {
        fontSize: 12,
        fontWeight: 'bold',
        fontFamily: defaults.fontFamily
      },
      style: styles.tabBar,
    },

    tabBarComponent: props =>{
        return(

            <React.Fragment>
                <TabBarComponent {...props} />
                <Image style={styles.fakeTabBackground}/>
            </React.Fragment>

        )
    }
})



export const Tabs=createBottomTabNavigator({
海报：{
屏幕：海报，
导航选项：{
tabBarLabel:“AFİŞA”，
tabBarIcon:（{tintColor}）=>(
)
}
},
即将到来：{
荧屏：很快就会出现，
导航选项：{
tabBarLabel:“TEZLİKLƏ”，
tabBarIcon:（{tintColor}）=>(
)
}
},
门票：{
屏幕：门票，
导航选项：{
标签：“BİLETLƏR”，
tabBarIcon:（{tintColor}）=>(
),
}
},
更多：{
屏幕：更多，
导航选项：{
tabBarLabel:“菜单”，
tabBarIcon:（{tintColor}）=>(
),
tabBarOnPress:（{navigation}）=>{
返回sd
}
}
},
}, 
{
订单：[“海报”、“即将到来”、“门票”、“更多”]，
选项卡选项：{
activeTintColor:colors.darkYellow（），
不显示颜色：“白色”，
标签样式：{
尺寸：12，
fontWeight:'粗体'，
fontFamily:默认值。fontFamily
},
style:styles.tabBar，
},
tabBarComponent:props=>{
返回(
)
}
})

也许为时已晚，但我希望这个答案能帮助很多人。在React Navigation version 2中，您可以这样做：


从'react navigation tabs'导入{createBottomTabNavigator，BottomTabBar}

如果已安装“react navigation”，则无需安装react navigation选项卡。
然后通过
consttabbarcomponent=（props）=>（）创建TabBarComponent。您将使用
tabBarComponent
输入
createBottomTabNavigator
。背景颜色：默认标签的“透明”，瞧

下面的代码将告诉您主要的想法


export const Tabs = createBottomTabNavigator({
    Posters: { 
        screen: Posters,
        navigationOptions: {
            tabBarLabel: 'AFİŞA',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="local-movies" size={24} color={tintColor} />
            )
        }
    },
    ComingSoon: { 
        screen: ComingSoon,
        navigationOptions: {
            tabBarLabel: 'TEZLİKLƏ',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="movie" size={24} color={tintColor} />
            )
        }
    },
    Tickets: { 
        screen: Tickets,
        navigationOptions: {
            tabBarLabel: 'BİLETLƏR',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="confirmation-number" size={24} color={tintColor} />
            ),

        }
    },
    More: { 
        screen: More,
        navigationOptions: {
            tabBarLabel: 'MENU',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name="more-horiz" size={24} color={tintColor} />
            ),
            tabBarOnPress: ({ navigation }) => {
                return <Text>sd</Text>
            }
        }
    },


}, 
{
    order: ['Posters', 'ComingSoon', 'Tickets', 'More' ],


    tabBarOptions: {
      activeTintColor: colors.darkYellow(),
      inactiveTintColor: 'white',
      labelStyle: {
        fontSize: 12,
        fontWeight: 'bold',
        fontFamily: defaults.fontFamily
      },
      style: styles.tabBar,
    },

    tabBarComponent: props =>{
        return(

            <React.Fragment>
                <TabBarComponent {...props} />
                <Image style={styles.fakeTabBackground}/>
            </React.Fragment>

        )
    }
})



export const Tabs=createBottomTabNavigator({
海报：{
屏幕：海报，
导航选项：{
tabBarLabel:“AFİŞA”，
tabBarIcon:（{tintColor}）=>(
)
}
},
即将到来：{
荧屏：很快就会出现，
导航选项：{
tabBarLabel:“TEZLİKLƏ”，
tabBarIcon:（{tintColor}）=>(
)
}
},
门票：{
屏幕：门票，
导航选项：{
标签：“BİLETLƏR”，
tabBarIcon:（{tintColor}）=>(
),
}
},
更多：{
屏幕：更多，
导航选项：{
tabBarLabel:“菜单”，
tabBarIcon:（{tintColor}）=>(
),
tabBarOnPress:（{navigation}）=>{
返回sd
}
}
},
}, 
{
订单：[“海报”、“即将到来”、“门票”、“更多”]，
选项卡选项：{
activeTintColor:colors.darkYellow（），
不显示颜色：“白色”，
标签样式：{
尺寸：12，
fontWeight:'粗体'，
fontFamily:默认值。fontFamily
},
style:styles.tabBar，
},
tabBarComponent:props=>{
返回(
)
}
})

我希望我能发表评论，但我没有足够的声誉去做这件事


<React.Fragment>
 <ImageBackground 
   source={require('./images/bottom_btn.png')} 
   style={{width: '100%', height: 80}}
 >
  <TabBarComponent {...props} />
 </ImageBackground>
</React.Fragment>







这对我有用。我花了将近一天的时间搞清楚这件事。
我希望我能发表评论，但我没有足够的声誉去做这件事


<React.Fragment>
 <ImageBackground 
   source={require('./images/bottom_btn.png')} 
   style={{width: '100%', height: 80}}
 >
  <TabBarComponent {...props} />
 </ImageBackground>
</React.Fragment>







这对我有用。花了将近一天的时间弄清楚
的事情。
使用最新版本的“react navigation tabs”，上述解决方案不起作用，我们需要做的是，我们应该将以下三个属性显式地传递给
底部Tabbar
组件：


 <BottomTabBar
    {...this.props}
    getButtonComponent={this.getButtonComponent}
    getAccessibilityRole={() => 'button'}
    getAccessibilityStates={({focused}) => (focused ? ['selected'] : [])}
  />



“按钮”}
GetAccessibilityState={（{focused}）=>（focused？['selected']：[]）}
/>


因此，本例的完整代码如下所示：


 class TabBar extends React.Component {
  render() {
    return (
      <BottomTabBar
        {...this.props}
        getButtonComponent={this.getButtonComponent}
        getAccessibilityRole={() => 'button'}
        getAccessibilityStates={({focused}) => (focused ? ['selected'] : [])}
      />
    );
  }

  getButtonComponent({route}) {
    if (route.key === 'Other') {
      return () => <View />; // a view that doesn't render its children
    } else {
      return null; // use the default nav button component
    }
  }
}

  const Tabs = createMaterialTopTabNavigator(
    {
      home: {
        screen: Home_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'home',
          tabBarIcon: ({tintColor}) => (
            <FontAwesome name="home" size={23} color={tintColor} />
          ),
        }),
      },
      favourites: {
        screen: Favourites_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'favourites',
          tabBarIcon: ({tintColor}) => (
            <Ionicons name="md-star" size={25} color={tintColor} />
          ),
        }),
      },
      calendar: {
        screen: Calendar_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'calendar',
          tabBarIcon: ({tintColor}) => (
            <Feather name="calendar" size={23} color={tintColor} />
          ),
        }),
      },
      shoppingList: {
        screen: ShoppingList_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'shopping List',
          tabBarIcon: ({tintColor}) => (
            <Feather name="shopping-bag" size={23} color={tintColor} />
          ),
        }),
      },
      profile: {
        screen: Profile_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'profile',
          tabBarIcon: ({tintColor}) => (
            <Feather name="user" size={23} color={tintColor} />
          ),
        }),
      },
    },
    {
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: true,
      tabBarOptions: {
        showIcon: true,
        activeTintColor: Colors.DARK.ICON_ACTIVE,
        inactiveTintColor: Colors.DARK.ICON_INACTIVE,
        style: {
          backgroundColor: 'transparent',
        },
        labelStyle: {
          textAlign: 'center',
          fontSize: 10,
          textTransform: 'capitalize',
          color: Colors.DARK.ICON_INACTIVE,
          marginBottom: 1,
          width: 70,
        },
        indicatorStyle: {
          borderBottomColor: Colors.DARK.ICON_INACTIVE,
          borderBottomWidth: 2,
        },
      },
      tabBarComponent: (props) => {
        return (
          <React.Fragment>
            <ImageBackground
              source={require('../../assets/images/image_bottom.jpg')}
              style={{width: '100%', height: 60}}>
              <TabBar {...props} />
            </ImageBackground>
          </React.Fragment>
        );
      },
    },
  );



类选项卡栏扩展了React.Component{
render（）{
返回(
'按钮'}
GetAccessibilityState={（{focused}）=>（focused？['selected']：[]）}
/>
);
}
getButtonComponent（{route}）{
如果（route.key===“其他”）{
return（）=>；//不呈现其子视图的视图
}否则{
return null；//使用默认的导航按钮组件
}
}
}
欺骗