我需要创建一个简单的布局。我有一个标题组件，在它下面我有一个包含内容的导航标签（参见sketch - https://imgur.com/a/9H7FMYU）。我希望通过反应导航或反应原生导航来实现这一目标。我不想使用react-native-tab-view的原因是因为它没有维护并且有很多错误。
编辑：我刚刚发现React导航使用react-native-tab-view来显示标签。因此，如果您正在寻找解决方案，请使用@user：568754 answer bellow或使用react-native-tab-view和标题
我认为您正在寻找的是反应导航中的MaterialTopTabNavigator组件。
以下是一些示例代码：
import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
class Head extends React.Component {
render() {
return (
<View style={{ height: 200, backgroundColor: 'blue' }}/>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createMaterialTopTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const RootNav = createAppContainer(TabNavigator);
class RootScreen extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Head />
<RootNav />
</View>
);
}
}
export default RootScreen;
以及预览世博会小吃的链接：https://snack.expo.io/@bra/creatematerialtoptabnavigator-example