鍍金池/ 問答/Android  HTML/ react-navigation (嵌套路由)標(biāo)題欄設(shè)置title后空白

react-navigation (嵌套路由)標(biāo)題欄設(shè)置title后空白

RN項(xiàng)目,寫了個嵌套路由的DEMO,使用的react-navigation組件,navigationOptions里設(shè)置title后,模擬器上標(biāo)題欄一片空白,沒有報(bào)錯。

底部TabNavigator代碼:
import React from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import TestScreen from './Test';
import SettingScreen from './SettingScreen';

TestScreen.navigationOptions = {

title: '首頁',
headerStyle: {
    backgroundColor: '#f4511e',
},

};
export default createBottomTabNavigator(

{
    Home: {
        screen: TestScreen,
        navigationOptions: ({navigation}) => ({
            //tabBarLabel: '首頁',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        }),
    },
    Setting: {
        screen: SettingScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-add-circle' : 'ios-add-circle-outline'}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        }
    }
},{
    initialRouteName: 'Home'
}

)

StackNavigator代碼:
import React from 'react';
import {

createBottomTabNavigator,
createStackNavigator,

} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from '../screen/HomeScreen';
import DetailScreen from '../screen/DetailScreen';
import SettingScreen from '../screen/SettingScreen';
import LoginScreen from '../screen/LoginScreen';
import TestScreen from '../screen/Test';
import AuthenScreen from '../screen/AuthenScreen';
import IndexStack from '../screen/IndexStack';

export default createStackNavigator({

Index: IndexStack,
Test: TestScreen,
Home: HomeScreen,
Detail: DetailScreen,
Login: LoginScreen,
Setting: SettingScreen,
Authen: AuthenScreen

},{

initialRouteName: 'Index'

})

模擬器頭部標(biāo)題欄空白,設(shè)置屬性沒有渲染
clipboard.png

回答
編輯回答
陪她鬧

const TabNavigator = createBottomTabNavigator({
Feed: FeedScreen,
Profile: ProfileScreen,
});

TabNavigator.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index];

// You can do whatever you like here to pick the title based on the route name
let headerTitle = routeName;

return {

headerTitle,

};
};

https://reactnavigation.org/d...

2017年3月21日 03:39