1

ドロワーが表示されていないときに、ドロワーのサイドバーを統合しました。それは単純な反応ナビゲーションの引出しを何も示していない。 ここに私のコードです。どうすればそれを働かせて見えるようにすることができますか?ネイティブベースのサイドバーはリアクションナビで表示されません

App.js

import React from 'react'; 

import {StyleSheet, Text, View } from 'react-native'; 

import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation'; 


import WelcomeScreen from './screens/WelcomeScreen'; 

import SigninScreen from './screens/SigninScreen'; 

import SignupScreen from './screens/SignupScreen'; 

import HomeScreen from './screens/HomeScreen'; 

import BusinessScreen from './screens/BusinessScreen'; 

import TechScreen from './screens/TechScreen'; 

import ProfileScreen from './screens/ProfileScreen'; 

import FavoritesScreen from './screens/FavoritesScreen'; 

import SettingsScreen from './screens/SettingsScreen'; 

import SideBar from './components/SideBar'; 

export default class App extends React.Component { 

render() { 

const MainNavigator = TabNavigator({ 

welcome: { screen: WelcomeScreen }, 

signin: { screen: SigninScreen }, 

signup: { screen: SignupScreen }, 

main: { 

screen: DrawerNavigator({ 

    home: { screen: HomeScreen }, 

    business: { screen: BusinessScreen }, 

    tech: { screen: TechScreen }, 


    profile: { 

    screen: StackNavigator({ 

     profile: { screen: ProfileScreen }, 

     settings: { screen: SettingsScreen } 

    }) 

    } 

}, 

) 

} 

}, 

{ 



    contentComponent: props => <SideBar {...props} /> 

} 

); 

return (

); 

} 
} 

HomeScreen.js

import React from "react"; 

import { StatusBar } from "react-native"; 

import { 
Button, 
Text, 
Container, 
Card, 
CardItem, 
Body, 
Content, 
Header, 
Title, 
Left, 
Icon, 
Right 
} from "native-base"; 

import SideBar from '../components/SideBar'; 

export default class HomeScreen extends React.Component { 

render() { 

return (

    <Container> 
    <Header> 
     <Left> 
     <Button 
      transparent 
      onPress={() => this.props.navigation.navigate("DrawerOpen")}> 
      <Icon name="menu" /> 
     </Button> 
     </Left> 
     <Body> 
     <Title>HomeScreen</Title> 
     </Body> 
     <Right /> 
    </Header> 
    <Content padder> 
     <Card> 
     <CardItem> 
      <Body> 
      <Text>Chat App to talk some awesome people!</Text> 
      </Body> 
     </CardItem> 
     </Card> 
     <Button 
     full 
     rounded 
     dark 
     style={{ marginTop: 10 }} 
     onPress={() => this.props.navigation.navigate("business")}> 
     <Text>Chat With People</Text> 
     </Button> 
     <Button 
     full 
     rounded 
     primary 
     style={{ marginTop: 10 }} 
     onPress={() => this.props.navigation.navigate("tech")}> 
     <Text>Goto Profiles</Text> 
     </Button> 
    </Content> 
    </Container> 

    ); 
} 
} 

SideBar.js

import React from "react"; 

import { AppRegistry, Image, StatusBar } from "react-native"; 

import { 
Button, 
Text, 
Container, 
List, 
ListItem, 
Content, 
Icon 
} from "native-base"; 

const routes = ["home", "business", "tech", "profile"]; 

export default class SideBar extends React.Component { 

render() { 

return (

    <Container> 

    <Content> 

     <Image 

     source={{ 

      uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png" 
     }} 
     style={{ 
      height: 120, 
      alignSelf: "stretch", 
      justifyContent: "center", 
      alignItems: "center" 
     }}> 
     <Image 
      square 
      style={{ height: 80, width: 70 }} 
      source={{ 
      uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png" 
      }} 
     /> 
     </Image> 
     <List 
     dataArray={routes} 
     renderRow={data => { 
      return (
      <ListItem 
       button 
       onPress={() => this.props.navigation.navigate(data)}> 
       <Text>{data}</Text> 
      </ListItem> 

     ); 
     }} 
     /> 
    </Content> 
    </Container> 
); 
} 
} 

間違って起こっていますか?

+0

をお試しください使用サイドバー

https://github.com/react-native-community/react-native-side-menu

用のパッケージの下に試してみてくださいこれはあなたの問題の最小限の例ですか?また、コードを書式設定する必要があります。 –

答えて

関連する問題