Question

我真的很想了解React Native Navigation v5。我已经成功实现了底部标签，但是当用户单击App.js中定义的屏幕之一（新闻，女士们，夹具）。

虽然我了解到主导航方法在每个屏幕之间都通过了props传递，但我如何才能使一个嵌套屏幕不显示为主导航的一部分，而是嵌套导航方法的一部分？我使用的是函数式编码，而不是基于类的编码，这是文档工作的一半。

我的App.js代码是;

import 'react-native-gesture-handler';
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import News from './components/news';
import Mens from './components/mens';
import Pdp from './components/pdp';
import Fixtures from './components/fixtures';
import Ladies from './components/ladies';
import Watch from './components/watch'
import { NavigationContainer, createAppContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const Tab = createBottomTabNavigator();
const Nav = createStackNavigator();

const App = () => {
return (
  <View style={styles.header}>
    <View></View>
    <View style={styles.body}>
    <NavigationContainer>
      <Tab.Navigator>
         <Tab.Screen name="News" component={News} />
         <Tab.Screen name="Mens" component={Mens} />         
         <Tab.Screen
          name="icon"
          component={Watch}
          options={{
            title: '',
            tabBarIcon: ({size,focused,color}) => {
              return (
                <Image
                  style={{ marginTop:20,width: 80, height: 80 }}
                  source={{
                    uri:
                      'https://derbyfutsal.files.wordpress.com/2020/05/derby-futsal-logo-2019.png',
                  }}
                />
              );
            },
          }}
        />
         <Tab.Screen name="Ladies" component={Ladies} />
         <Tab.Screen name="Fixtures" component={Fixtures} />
       </Tab.Navigator>
       </NavigationContainer>
    </View>
  </View>
)
};

const styles = StyleSheet.create({
header: {
  marginTop: 20,
  height:0,
  flex: 1
},
body: {
  flex:2,
  flexGrow:2,
},
nav: {
fontSize: 20,
},
});

export default App;

News.js中的示例代码；

 <TouchableOpacity onPress={() => props.navigation.navigate('Pdp')}>
            <Image style={styles.img} source={{ uri: chkValue(item.jetpack_featured_media_url) }} />
            <View>
                <Text style={styles.textbck}>{htmlRegex(item.title.rendered)}</Text>
                <Text style={styles.summary}>{htmlRegex(item.excerpt.rendered)}{"\n"}{Moment(item.date, "YYYYMMDD").fromNow()}</Text>
          </View>
          </TouchableOpacity>

Pdp是用户单击文章时要打开的页面。

反应原生导航

0 个答案: