Question

更新：它是引起问题的我的AppNavigator，如果我删除它，它将显示背景。如何将ImageBackground与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);

Answer 1

ImageBackground组件有一个名为resizeMode的道具，它具有以下选项（'cover'，'contain'，'stretch'，'repeat'，'center'），请尝试以下代码并使用其他选项，并检查是否满足要求

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

反应导航ImageBackground显示白屏

1 个答案: