Question

我正在尝试实现类似Instagram的导航

我在App.js中有一个buttom选项卡导航

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Home from './views/Home'
import Search from './views/Search'

const MainNavigator = createBottomTabNavigator({
  Home: { screen: Home },
  Search: { screen: Search },
}, {
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let IconComponent = Ionicons;
            let iconName;

            if(routeName === 'Home'){
                iconName = `ios-home`;
            }

            if(routeName === 'Search'){
                iconName = `ios-search`;
            }

            return <IconComponent name={iconName} size={25} color={tintColor} />;
        }
    }),
    initialRouteName: 'Search',
    tabBarOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#4c399c',
      inactiveTintColor: '#f1f3f5',
      inactiveBackgroundColor: '#5442a0',
      showLabel: false
    },
});

const App = createAppContainer(MainNavigator);

export default App;

我将在底部看到两个以上的视图。顶部栏的所有视图上将带有居中徽标，某些视图的左侧按钮为1个和/或右侧按钮为1个。

我想要实现的是不在每个视图中渲染标题栏，而是全局声明一个（如底部导航），并在将要包含它们的少数视图上添加自定义按钮

Answer 1

将选项卡导航作为父项，并在每个选项卡中添加堆栈导航。

Answer 2

一种简单的方法是使用 react-native-elements 中的 Header 组件。您只需要将其添加到想要标题的屏幕上即可。添加按钮以打开抽屉或其他所需的东西真的很容易。

为此，请不要忘记将 header：null 添加到堆栈导航器中，否则最终将在屏幕上显示2个标题。

以下示例：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

Answer 3

此代码将显示标题在BottomTabNavigator-MainNavigator的每个屏幕上居中

library(disk.frame)
csv_to_disk.frame("/path/to/file.csv", in_chunk_size = 1e7)

React-当我有底部标签导航时如何添加标题

3 个答案: