Question

我为抽屉集成了侧边栏，但没有显示。它显示简单的反应导航抽屉没有别的。这是我的代码。我怎样才能让它工作和可见？

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

出了什么问题？

Answer 1

尝试下面的包使用侧栏

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

试试这个方法

在React-Navigation中看不到Native-Base SideBar

1 个答案: