javascript - 看起来您正在为屏幕“添加”的“组件”道具传递一个内联函数（例如 component={() =>})

Question

我面临的问题是 react-navigation 给了我警告，我正在为组件 prop 传递一个内联函数。按照代码：

const Tab = createBottomTabNavigator();

export default function TabNavigator ({navigation, route}) {

    return (

    <Tab.Navigator 
        initialRouteName="Home"
        tabBarOptions={{activeTintColor: "#6b6b6b", inactiveTintColor: "#d3d3d3", labelStyle: {fontSize: RFValue(8), top: -5, fontFamily: 'Montserrat-Regular'}, style:{borderTopColor: 'transparent'}}}>
        <Tab.Screen 
            name="Home" 
            component={Home}
            options={{tabBarIcon:({color})=> (<Icon_Home name="home" size={RFValue(20)} color={color}/>)}}/>
        <Tab.Screen 
            name="Kategorien" 
            component={Categories} 
            options={{tabBarIcon:({color})=> (<Icon_Categories name="list" size={RFValue(18)} color={color}/>)}}/>
        <Tab.Screen
            name="Add"
            component={() => null}
            options={{
                tabBarIcon: (props) => (
                    <View style={{flex: 1, width: "100%"}}>
                        <TouchableOpacity 
                            style={{flex: 1, justifyContent: "center", alignItems: "center"}}
                            onPress={async () => {
                                ActionSheetIOS.showActionSheetWithOptions (
                                    {
                                    options: ["Cancel", "Fotos", "Kamera"],
                                    cameraButtonIndex: 2,
                                    galleryButtonIndex: 1,
                                    cancelButtonIndex: 0
                                    },
                            
                                    async buttonIndex => {
                            
                                    if (buttonIndex === 0) {
                            
                                        } else if (buttonIndex === 1) {
                                
                                            // const {status} = await Permissions.askAsync(Permissions.CAMERA_ROLL)
                                            // if (status == "granted") {
                
                                            //     let result = await ImagePicker.launchImageLibraryAsync();
                                    
                                            //     if (!result.cancelled) {
                                            //         navigation.navigate("AddReceiptScreen", {image: result});
                                            //         console.log(result);
                                            //     }
                                            // }

                                            console.log("Index 1 pressed.")
                                                
                                        } else if (buttonIndex === 2) {
                
                                            // const {status} = await Permissions.askAsync(Permissions.CAMERA)
                                            // if (status == "granted") {
            
                                            //     // let result = await ImagePicker.launchCameraAsync();
                                            //     let result = await imageScanner;
            
                                            //     if (!result.cancelled) {
                                            //         navigation.navigate("AddReceiptScreen", {image: result});
                                            //         console.log(result);
                                            //     }
                                            // }
                                            
                                            console.log("Index 2 pressed.")
                                        }
                                    }
                                )
                            }}>
                        <Image
                            source={Icon_Add}
                            style={{width: RFValue(35), height: RFValue(35)}}/>
                        </TouchableOpacity>
                    </View>
                ),
                tabBarLabel: () => null,
            }}/>
        <Tab.Screen 
            name="Detail" 
            component={Detail}
            options={{tabBarIcon:({color})=> (<Icon_Detail name="bar-graph" size={RFValue(18)} color={color}/>)}}/>
        <Tab.Screen 
            name="Profil" 
            component={Profile}
            options={{tabBarIcon:({color})=> (<Icon_Profile name="user-alt" size={RFValue(18)} color={color}/>)}}/>
    </Tab.Navigator>

    )
}

如何解决警告？

标签： javascriptreactjsreact-nativereact-navigation

Answer 1

我找到了解决办法。我没有使用 component = {() => null}，而是创建了另一个组件

const AddScreen = () => { return null }

并将这个用于组件。