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>
);
}
}
間違って起こっていますか？
をお試しください使用サイドバー
https://github.com/react-native-community/react-native-side-menu
用のパッケージの下に試してみてくださいこれはあなたの問題の最小限の例ですか？また、コードを書式設定する必要があります。 –