アクティブなタブの色を変更するにはどうすればいいですか？ （タブはカスタムです）

Question

RN v 0.46.1プロジェクトで反応ナビゲーションを使用しています

私はreact-navigationのexampleディレクトリからcustomTabsを使用しました。

アクティブなときにタブの色を変更したいと思います。

私は、navigationOptionsを使用して渡すことを試みましたが、成功しませんでした。

また、上部にタブが表示されています。下部に表示します。

import React, { Component } from "react"; 
import { AppRegistry, Button, 
    Platform, 
    ScrollView, 
    StyleSheet, 
    Text, 
    TouchableOpacity, 
    View } from "react-native"; 
import { createNavigator, 
     createNavigationContainer, 
     TabRouter, 
     addNavigationHelpers } from 'react-navigation' 
import Chats from './Chats' 
import Contacts from './Contacts' 

const MyNavScreen = ({ navigation, banner }) => (
    <ScrollView> 
    <Text>banner</Text> 
    <Button 
     onPress={() => { 
     navigation.goBack(null); 
     }} 
     title="Go back" 
    /> 
    </ScrollView> 
); 

const MySettingsScreen = ({ navigation }) => (
    <MyNavScreen banner="Settings Screen" navigation={navigation} /> 
); 

const CustomTabBar = ({ navigation }) => { 
    const { routes } = navigation.state; 
    return (
    <View style={styles.tabContainer}> 
     {routes.map(route => (
     <TouchableOpacity 
      onPress={() => navigation.navigate(route.routeName)} 
      style={styles.tab} 
      key={route.routeName} 
     > 
      <Text>{route.routeName}</Text> 
     </TouchableOpacity> 
    ))} 
    </View> 
); 
}; 

const CustomTabView = ({ router, navigation }) => { 
    const { routes, index } = navigation.state; 
    const ActiveScreen = router.getComponentForState(navigation.state); 
    const routeNav = addNavigationHelpers({ 
    ...navigation, 
    state: routes[index], 
    }); 
    const routeOptions = router.getScreenOptions(routeNav, 'tabBar'); 
console.log(routeOptions.headerTintColor); 
    return (
    <View style={styles.container}> 
     <CustomTabBar navigation={navigation} /> 
     <ActiveScreen 
     navigation={addNavigationHelpers({ 
      ...navigation, 
      state: routes[index], 
     })} 
     /> 
    </View> 
); 
}; 


const CustomTabRouter = TabRouter(
    { 
    Friends: { 
     screen: Chats, 
     path: '', 
    }, 
    Status: { 
     screen: Contacts, 
     path: 'notifications', 
    }, 
    Other: { 
     screen: MySettingsScreen, 
     path: 'settings', 
    }, 
    }, 
    { 

    initialRouteName: 'Friends', 

    }, 
); 

const CustomTabs = createNavigationContainer(
    createNavigator(CustomTabRouter)(CustomTabView) 
); 

const styles = StyleSheet.create({ 
    container: { 
    marginTop: Platform.OS === 'ios' ? 20 : 0, 
    }, 
    tabContainer: { 
    flexDirection: 'row', 
    height: 48, 
    }, 
    tab: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    margin: 4, 
    borderWidth: 1, 
    borderColor: '#ddd', 
    borderRadius: 4, 
    backgroundColor:'white' 
    }, 
}); 

export default CustomTabs; 

AppRegistry.registerComponent('awsm',() => CustomTabs); 

Answer 1

あなたはとても親ビューでScrollViewを使用して、あなたのタブができ、アクティブなタブのrouteNameマップでの比較と下部にスタイリングタブの

style={[(this.props.activeRouteName == route.routeName) ? styles.activeTab : styles.tab]} 

のようなスタイルを追加し、それがこの

ようになります

<View style={flex:1}> 
    <ScrollView> 
     // your page content 
    </ScrollView> 
    <Tabs/> 
</View> 

スクロールビューを使用すると、タブを強制的に下に移動させることができます。

Answer 2

デフォルト値TabNavigatorで希望の効果を達成できませんか？ docsで

あなたはとてもあなたのTabBarには下部になりますTabNavigatorコンテナにTabBarComponentを渡し、bottomにtabBarPosition - position of the tab bar, can be 'top' or 'bottom'を設定することができます。あなたはまだ自身が、私は推測しているすべて行いたい場合は

：

• が下にTabBarコンテナを合わせるには、あなたの集中タブの色を変更するにはTabBarのスタイルに
• を{ position: 'absolute', bottom: 0 }を入れることができます、あなたが行うことができます：

const CustomTabBar = ({ navigation }) => { const { routes, index } = navigation.state; const isFocused = routes[index].routeName == route.routeName; // Not totally sure about the condition there, but you get the idea? return ( <View style={styles.tabContainer}> {routes.map(route => ( <TouchableOpacity onPress={() => navigation.navigate(route.routeName)} style={[styles.tab, isFocused ? styles.focusedTab : null]} key={route.routeName} > <Text>{route.routeName}</Text> </TouchableOpacity> ))} </View> ); };

を？