React 导航 ImageBackground 显示白屏 [英] React navigation ImageBackground displaying white screen

问题描述

更新:是我的 AppNavigator 导致问题，如果我删除它，它会显示背景.如何将 ImageBackground 与我的 AppNavigator 一起使用:

Update: Its my AppNavigator thats causing the problem, if I remove it, it displays the background. How can I use ImageBackground with my AppNavigator:

const config = {
    initialRouteName: "Home",
    contentOptions: {
        activeTintColor: "#e91e63",
        itemsContainerStyle: {
            // opacity: 1
        },
        iconContainerStyle: {
            // opacity: 1
        },
        itemStyle: {
            flexDirection: "row-reverse"
        }
    },
    drawerWidth: 300,
    drawerPosition: "right",
    drawerBackgroundColor: "transperent"
};

const withHeader = (
    screen: Function,
    routeName: string,
    Header
): StackNavigator =>
    createStackNavigator({
        [routeName]: {
            screen,
            navigationOptions: ({ navigation, routeName, props }) => ({
                header: props => <Header {...props} />,
                title: routeName,
                headerMode: "screen",
                layoutPreset: "right",
                cardStyle: { backgroundColor: "transperent" }
            })
        }
    });

const routes = {
    Home: {
        screen: withHeader(HomeScreen, "Home", BasicHeader)
    },
    Links: {
        screen: withHeader(LinksScreen, "Links", DrawerHeader)
    },
    Settings: {
        screen: withHeader(SettingsScreen, "Settings", DrawerHeader)
    },
    VideoEpisodes: {
        screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
    },
    VideoPlayer: {
        screen: withHeader(VideoPlayerScreen, "Video Player", DrawerHeader)
    },
    TestYourself: {
        screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
    },
    MyResults: {
        screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
    },
    BookmarkedVideos: {
        screen: withHeader(
            BookmarkedVideosScreen,
            "Bookmarked Videos",
            DrawerHeader
        )
    },
    Search: {
        screen: withHeader(SearchScreen, "Search", DrawerHeader)
    },
    About: {
        screen: withHeader(AboutScreen, "About", DrawerHeader)
    }
};

const AppNavigator = createDrawerNavigator(routes, config);

export default createAppContainer(AppNavigator);

推荐答案

ImageBackground 组件有一个叫做 resizeMode 的道具.它有这些选项 ('cover', 'contain', 'stretch', 'repeat', 'center')请尝试使用不同选项的以下代码，并检查您的要求是否满足.

ImageBackground component has a props called resizeMode.It has these options ('cover', 'contain', 'stretch', 'repeat', 'center') please try the below code with different options and check if your requirement fullfils.

export default class App extends React.Component {   render() {
    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
        resizeMode= "stretch"
      >
        {Platform.OS === "ios" && <StatusBar barStyle="default" />}
        <Provider store={store}>
          <AppNavigator />
        </Provider>
      </ImageBackground>
    );   } }

const styles = StyleSheet.create({   container: {
    flex: 1,
    fontFamily: "lato-regular",
    width: "100%",
    height: "100%" 
} });

这篇关于React 导航 ImageBackground 显示白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！