如何在反应导航器中使用父子函数

问题描述

我正在关注 github 上的教程，并尝试制作一个修改过的测试页面，在它的底部带有一个子函数/模块/类。

I am following a tutorial on github and attemping to make a modified test page with a child function/ module/class at the bottom of it.

https://github.com/oblador/react-native-lightbox/blob/master/Example/app.js

I have the following hierarchy and cannot seem to get the child function to retrieve data from another jsx/ tsx file in the same folder

**App.js -> Statusbar.

Statusbar -> Home.js
Home.js has a reference to a small class called droplist with a small child function**

Just as a very basic example I would like the following to work

**Here we see the reference to <StatusBar /> (Located in the navigation folder > BottomTabNavigator.tsx)**

'''
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {StyleSheet,Constants} from 'react-native';
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',},)
'''

**The navigator is as follows**

'''
   <BottomTab.Screen
        name="Studio A"
        component={TabThreeNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color}/>,}}
      />
      <BottomTab.Screen
        name="Studio B"
        component={TabFourNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color}/>,}}
        />
    </BottomTab.Navigator>
  );
}


function TabBarIcon(props: { name: string; color: string }) {
  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}

const TabOneStack = createStackNavigator<TabOneParamList>();

function TabOneNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="TabOneScreen"
        component=**{Home}**
        options={{ headerTitle: 'Test' }}
      />
    </TabOneStack.Navigator>
  );
}

const TabTwoStack = createStackNavigator<TabTwoParamList>();

function TabTwoNavigator() {
  return (
    <TabTwoStack.Navigator>
      <TabTwoStack.Screen
        name="TabTwoScreen"
        component={Introb}
        options={{ headerTitle: 'Tab Two Title' }}
      />
    </TabTwoStack.Navigator>
  );
}

const TabThreeStack = createStackNavigator<TabThreeParamList>();

function TabThreeNavigator() {
  return (

'''
**The screens are located in the 'Screens' folder > Flux**
**Home.tsx is the main initialisation screen** 
**Droplist.tsx is a class I would like to appear in Home.tsx**

**An excerpt from Home TSX is as follows**
**This test home page displays lightboxed pictures of animals in hats***

'''   export default () => (
  <ScrollView style={styles.container}>
    <View style={styles.text}><Text>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
    <Lightbox underlayColor="white">
      <Image
        style={styles.contain}
        resizeMode="contain"
        source={{ uri: 'https://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg' }}
      />
    </Lightbox>
    <View style={styles.text}><Text>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
    <Lightbox springConfig={{tension: 15,friction: 7}} swipeToDismiss={false} renderContent={renderCarousel}>
      <Image
        style={styles.carousel}
        resizeMode="contain"
        source={{ uri: 'http://cdn.lolwot.com/wp-content/uploads/2015/07/20-pictures-of-animals-in-hats-to-brighten-up-your-day-1.jpg' }}
      />
    </Lightbox>
    <View style={styles.text}><Text>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
    <Lightbox
      renderHeader={close => (
        <TouchableOpacity onPress={close}>
          <Text style={styles.closeButton}>Close</Text>
        </TouchableOpacity>
      )}>
      <View style={styles.customHeaderBox}>
        <Text>I have a custom header</Text>
      </View>
    </Lightbox>
    <View style={styles.text}><Text>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
    <View style={styles.row}>
      <Lightbox style={styles.col}>
        <View style={[styles.square,styles.squareFirst]}><Text style={styles.squareText}>I'm a square</Text></View>
      </Lightbox>
      <Lightbox style={styles.col}>
        <View style={[styles.square,styles.squareSecond]}><Text style={styles.squareText}>I'm a square</Text></View>
      </Lightbox>
    </View>
    <View style={styles.text}><Text>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
  </ScrollView>
)  
const styles = StyleSheet.create({
  container: {
    paddingHorizontal: BASE_PADDING,closeButton: {
    color: 'white',borderWidth: 1,borderColor: 'white',padding: 8,borderRadius: 3,textAlign: 'center',margin: 10,alignSelf: 'flex-end',customHeaderBox: {
    height: 150,backgroundColor: '#6C7A89',justifyContent: 'center',alignItems: 'center',row: {
    flexDirection: 'row',marginLeft: -BASE_PADDING,marginRight: -BASE_PADDING,col: {
    flex: 1,square: {
    width: WINDOW_WIDTH / 2,height: WINDOW_WIDTH / 2,alignSelf: 'center',squareFirst: {
    backgroundColor: '#C0392B',squareSecond: {
    backgroundColor: '#019875',squareText: {
    textAlign: 'center',color: 'white',carousel: {
    height: WINDOW_WIDTH - BASE_PADDING * 2,width: WINDOW_WIDTH - BASE_PADDING * 2,backgroundColor: 'white',contain: {
    flex: 1,height: 150,text: {
    marginVertical: BASE_PADDING * 2,});'''

https://github.com/oblador/react-native-lightbox/blob/master/Example/app.js

I have the following hierarchy and cannot seem to get the child function to retrieve data from another jsx/ tsx file in the same folder

**App.js -> Statusbar.

Statusbar -> Home.js
Home.js has a reference to a small class called droplist with a small child function**

Just as a very basic example I would like the following to work

**Here we see the reference to <StatusBar /> (Located in the navigation folder > BottomTabNavigator.tsx)**

'''
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {StyleSheet,});'''


[APP]----------->[STATUSBAR]
              
                     |
              
                     
                     |
                     v
                     |_________[HOME.JS]
                                  IMPORT STATEMENT (IMPORT DROPLIST FROM './FLUX/SCREENS')
                                  | 
                                  v
                               <DROPLIST />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）