React Native中React Navigation报错：如何在同一页面混用导航视图与其他视图？

你遇到的问题很常见——TabNavigator本身是默认占据全屏的组件，直接把它塞进没有布局约束的View里，会因为布局规则冲突导致渲染报错。下面给你两种常用的解决方案，根据你的需求来选：

方案一：把额外视图整合到导航结构中（比如添加顶部栏） #

如果你的额外视图是页面的固定组成部分（比如自定义头部、底部信息栏），可以把MyNav作为子组件放在一个主容器里，同时设置合理的flex布局让它们分配空间：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { TabNavigator } from 'react-navigation';

// 你的各个屏幕组件
class NewsScreen extends Component {
  render() { return <Text>News Screen</Text>; }
}
class VideosScreen extends Component {
  render() { return <Text>Videos Screen</Text>; }
}
class BandsScreen extends Component {
  render() { return <Text>Bands Screen</Text>; }
}
class JokesScreen extends Component {
  render() { return <Text>Jokes Screen</Text>; }
}

// 定义Tab导航
const MyNav = TabNavigator({
  News: { screen: NewsScreen },
  Videos: { screen: VideosScreen },
  Bands: { screen: BandsScreen },
  Jokes: { screen: JokesScreen },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: { activeTintColor: '#e91e63' },
});

// 主容器组件，整合额外视图和Tab导航
class MainContainer extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 这里是你想要添加的额外视图，比如自定义头部 */}
        <View style={{ 
          height: 50, 
          backgroundColor: '#f5f5f5', 
          justifyContent: 'center', 
          alignItems: 'center' 
        }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>我的应用</Text>
        </View>
        {/* Tab导航占满剩余屏幕空间 */}
        <MyNav style={{ flex: 1 }} />
      </View>
    );
  }
}

export default class App extends Component {
  render() {
    return <MainContainer />;
  }
}

方案二：添加悬浮/独立视图（比如悬浮按钮） #

如果你的额外视图是独立于导航的元素（比如悬浮操作按钮、侧边栏），可以用绝对定位来放置它，同时确保外层容器和Tab导航的布局正确：

import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { TabNavigator } from 'react-navigation';

// 你的各个屏幕组件（省略，和上面一致）
class NewsScreen extends Component { render() { return <Text>News Screen</Text>; } }
class VideosScreen extends Component { render() { return <Text>Videos Screen</Text>; } }
class BandsScreen extends Component { render() { return <Text>Bands Screen</Text>; } }
class JokesScreen extends Component { render() { return <Text>Jokes Screen</Text>; } }

// 定义Tab导航
const MyNav = TabNavigator({
  News: { screen: NewsScreen },
  Videos: { screen: VideosScreen },
  Bands: { screen: BandsScreen },
  Jokes: { screen: JokesScreen },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: { activeTintColor: '#e91e63' },
});

export default class App extends Component<{}> {
  render() {
    return(
      <View style={{ flex: 1 }}> {/* 外层容器必须设置flex:1占满屏幕 */}
        <MyNav style={{ flex: 1 }} /> {/* Tab导航占满剩余空间 */}
        {/* 用绝对定位放置你的额外视图，不会影响导航布局 */}
        <View style={{ 
          position: 'absolute', 
          bottom: 20, 
          right: 20,
          width: 60,
          height: 60,
          borderRadius: 30,
          backgroundColor: '#e91e63',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <Text style={{ color: 'white', fontSize: 24 }}>+</Text>
        </View>
      </View>
    );
  }
}

关键注意点： #

• 外层View一定要设置style={{ flex: 1 }}，否则容器会根据内容高度收缩，导致Tab导航无法正常渲染。
• TabNavigator本身需要占据足够的空间，所以给它设置flex:1或者放在flex布局的容器里是必须的。
• 绝对定位的元素不会参与正常的布局流，适合放置独立的小控件，不会挤压导航视图的空间。

内容的提问来源于stack exchange，提问作者user9162890