React navigation ImageBackground displaying white screen

问题

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);

回答1:

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%" 
} });

来源：https://stackoverflow.com/questions/56290653/react-navigation-imagebackground-displaying-white-screen

标签

javascript

react-native

react-navigation

imagebackground