如何解决如何在反应导航器中使用父子函数
我正在关注 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 举报，一经查实，本站将立刻删除。
