У меня есть маленькое приложение, которое должно иметь меню ящика сбоку и маленькую кнопку «Плюс», которая сдвигает панель с более чем 4 кнопками примерно так:
app.js запускает навигатор Switch с двумя экранами: один для входа в систему и один для стека.
стек имеет DrawerNavigation в качестве экрана меню, а также другие экраны.а в навигации по ящику есть несколько других экранов: код ниже:
const SideMenuDrawer = createDrawerNavigator({
Main: MainScreen,
'Invite A Friend Screen': InviteAFriendScreen,
About: AboutScreen,
Schedule: ScheduleScreen,
Groups: GroupsScreen
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
headerTitle: routeName,
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18
}
}
}
}
);
const AppStack = createStackNavigator({
MainScreen: SideMenuDrawer,
PhotoScreen: PhotoScreen,
DocumentScreen: DocumentScreen,
AudioScreen: AudioScreen,
GalleryScreen: GalleryScreen
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
name="md-menu"
size={35}
style={{ paddingLeft: 10 }}
color="white"
onPress={() => navigation.openDrawer()}
/>
)
}
}
}
);
const AppContainer = createAppContainer(createSwitchNavigator(
{
LoginSplashScreen: LoginSplashScreen,
MainScreen: AppStack
},
{
initialRouteName: 'MainScreen',
}
));
export default class App extends React.Component {
render() {
return (
<AppContainer />
)
}
}
и SlidingPanel находится в функции render () экрана Меню :
class MainScreen extends React.Component {
state = {
slideUpPanelvisible: false
}
render() {
const window = Dimensions.get('window');
const { navigation } = this.props;
const signedIn = global.signedIn;
const name = global.name;
const photoUrl = global.photoUrl;
return (
<View style={{ flex: 1 }}>
<View style={[styles.container]} >
<Text style={styles.header}>Welcome {name}</Text>
<Image style={styles.image} source={{ uri: photoUrl }} />
</View>
<View style={styles.addButton}>
<TouchableOpacity
onPress={() => this.setState({ slideUpPanelvisible: true })} >
<Icon name="add-circle" size={60} color='#0E2E49' />
</TouchableOpacity>
</View>
<SlidingUpPanel
visible={this.state.slideUpPanelvisible}
startCollapsed={true}
draggableRange={{ top: window.height * 0.4, bottom: 0 }}
onRequestClose={() => this.setState({ slideUpPanelvisible: false })}
allowDragging={true}
>
<View style={styles.panelcontainer}>
<Text style={styles.header}>Text inside the Sliding Panel </Text>
</View>
</SlidingUpPanel>
</View>
)
}
}
но ящик не отображается на устройстве Android (GEnymotion, android studio и реальное устройство) на устройстве Iphone, он прекрасно работает!
что я делаю не так?