如何在 React Native 的另一個組件下創建頂部導航選項卡？

Question

我正在使用 react-navigation 版本 5，目前，我在位於 SafeAreaView 頂部的視圖中有一個帶有文本和按鈕的屏幕，我需要在視圖下方添加 TopTabNavigator。

這是代碼：

時間線組件.js

 import React from 'react'; import PropTypes from 'prop-types'; import {ScrollView, Text} from 'react-native'; class TimelineComponent extends React.PureComponent { render() { return ( <ScrollView> <Text>Timeline</Text> </ScrollView> ); } } export default TimelineComponent;

TrendingComponent.js

 import React from 'react'; import PropTypes from 'prop-types'; import {ScrollView, Text} from 'react-native'; class TrendingComponent extends React.PureComponent { render() { return ( <ScrollView> <Text>Trending</Text> </ScrollView> ); } } export default TrendingComponent;

TopNav.js

 import React from 'react'; import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; import TimelineComponent from '../TimelineComponent'; import TrendingComponent from '../TrendingComponent'; const Tab = createMaterialTopTabNavigator(); export function TopNav() { return ( <Tab.Navigator> <Tab.Screen name="Timeline" component={TimelineComponent} /> <Tab.Screen name="Trending" component={TrendingComponent} /> </Tab.Navigator> ); }

WallFragmentComponent.js

 import React from 'react'; import PropTypes from 'prop-types'; import Icon from 'react-native-vector-icons/FontAwesome'; import { Keyboard, SafeAreaView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View, } from 'react-native'; import {TopNav} from './TopNav'; const styles = StyleSheet.create({ container: { padding: 20, }, header_container: { backgroundColor: 'white', alignItems: 'center', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', }, header_text: { fontSize: 30, fontWeight: '500', }, new_chat_button: { alignItems: 'center', borderColor: 'blue', borderWidth: 1, borderRadius: 12, display: 'flex', flexDirection: 'row', paddingHorizontal: 22, paddingTop: 6, paddingVertical: 6, }, top_nav: { marginVertical: 20, }, }); class WallFragmentComponent extends React.PureComponent { constructor(props) { super(props); this.state = { input: {}, secureTextEntry: true, }; } handleInput = (name, value) => { this.setState({ input: {...this.state.input, [name]: value}, }); }; render() { return ( <View style={{backgroundColor: 'white'}}> <SafeAreaView> <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <View style={styles.container}> <View style={styles.header_container}> <Text style={styles.header_text}>Wall</Text> <TouchableOpacity style={styles.new_chat_button}> <Icon name="comment" style={{marginEnd: 6, color: 'blue'}} /> <Text style={{fontWeight: '500', color: 'blue'}}> New Post </Text> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> <View style={styles.top_nav}> <TopNav /> </View> </SafeAreaView> </View> ); } } export default WallFragmentComponent;

在 WallFragmentComponent.js 文件中，我已將<TopNav />放置在視圖中，但在我運行項目時它沒有呈現。 這是屏幕截圖： screenshot

我如何能夠在牆文本和新帖子按鈕下添加頂部導航？ 任何幫助都感激不盡。

謝謝，問候

Answer 1

這可能會有所幫助

// TopNav.js
  
const Tab = createMaterialTopTabNavigator();

const AppNavigator = () => {

  return (
     <Tab.Navigator>
       <Tab.Screen name="Timeline" component={TimelineComponent} />
       <Tab.Screen name="Trending" component={TrendingComponent} />
     </Tab.Navigator>
  )
}

  
export default AppNavigator;

WallFragmentComponent.js

import AppNavigator from './AppNavigator';
...........

const TopNav = createAppContainer(AppNavigator);

class WallFragmentComponent extends React.PureComponent { 
......
render() {
    return (
      <View style={{backgroundColor: 'white'}}>
        ......
            <TopNav />
        ......
      </View>
    );
  }
}

您還可以使用react-native-scrollable-tab-view

Answer 2

好吧，最后我找到了解決方案：

1. 將第一個<View... />元素更改為<SafeAreaView style={{flex: 1}} /> ，然后一切正常。

WallFragmentComponent.js

 import React from 'react'; import PropTypes from 'prop-types'; import Icon from 'react-native-vector-icons/FontAwesome'; import { Keyboard, SafeAreaView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View, } from 'react-native'; import {TopNav} from './TopNav'; const styles = StyleSheet.create({ container: { padding: 20, }, header_container: { backgroundColor: 'white', alignItems: 'center', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', }, header_text: { fontSize: 30, fontWeight: '500', }, new_chat_button: { alignItems: 'center', borderColor: 'blue', borderWidth: 1, borderRadius: 12, display: 'flex', flexDirection: 'row', paddingStart: 22, paddingEnd: 22, paddingTop: 6, paddingBottom: 6, }, top_nav: { marginTop: 20, }, }); class WallFragmentComponent extends React.PureComponent { constructor(props) { super(props); this.state = { input: {}, secureTextEntry: true, }; } handleInput = (name, value) => { this.setState({ input: {...this.state.input, [name]: value}, }); }; render() { return ( <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}> <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <View style={styles.container}> <View style={styles.header_container}> <Text style={styles.header_text}>Wall</Text> <TouchableOpacity style={styles.new_chat_button}> <Icon name="comment" style={{marginEnd: 6, color: 'blue'}} /> <Text style={{fontWeight: '500', color: 'blue'}}> {' '} New Post </Text> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> <TopNav /> </SafeAreaView> ); } } export default WallFragmentComponent;

截屏

就是這樣