Реагируйте на навигацию ImageBackground с белым экраном - PullRequest
Новая
       33

Реагируйте на навигацию ImageBackground с белым экраном

0 голосов
/ 24 мая 2019

Обновление: это мое 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);

1 Ответ

0 голосов
/ 24 мая 2019

Компонент ImageBackground имеет реквизит, называемый resizeMode. У него есть эти опции («обложка», «содержать», «растянуть», «повторить», «центр»), попробуйте приведенный ниже код с разными опциями и проверьте, полностью ли соответствует ваше требование.. 

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