Я разрабатываю новое мобильное приложение с компонентом Drawer в native-base.И я сталкиваюсь с сообщением об ошибке ниже, когда нажимаю на иконку справа на заголовке.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRed()?
Это GIF при нажатии на иконку.https://gyazo.com/31c6483acfda7ad3c6239e6171dbe688
Это мой код.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator,createAppContainer, createStackNavigator, DrawerItems } from 'react-navigation'
import { Container, Content, Header, Left } from 'native-base';
import { Router, Scene } from 'react-native-router-flux';
import HomeScreen from './src/screens/HomeScreen';
import NoticeScreen from './src/screens/NoticeScreen';
import UserScreen from './src/screens/UserScreen';
export default class App extends Component{
render(){
return(
<Router>
<Scene key='root'>
<Scene key='HomeScreen' component={HomeScreen} hideNavBar={true} panHandlers={null}/>
<Scene key='NoticeScreen' component={NoticeScreen} hideNavBar={true} panHandlers={null} />
<Scene key='UserScreen' component={UserScreen} hideNavBar={true} panHandlers={null} />
</Scene>
</Router>
);
}
}
import React, { Component } from 'react';
import { Image, ImageBackground, Text, Linking, ScrollView, StyleSheet, View, Dimensions, TouchableOpacity, SafeAreaView } from 'react-native';
import { Body, Container, Content, ListItem, List, Header, Icon, Left, Right, Thumbnail, Drawer } from "native-base";
import { Actions } from 'react-native-router-flux';
import SidebarContainer from '../containers/SidebarContainer';
export default class HomeScreen extends Component {
openDrawer() {
this.drawer._root.open();
};
closeDrawer() {
this.drawer._root.close();
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarContainer navigator={this._navigator} />}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
>
<ImageBackground source={require('../../assets/header/blue.jpg')} style={{ width: null }}>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
<Body>
</Body>
<Right>
<TouchableOpacity onPress={Actions.UserScreen}>
<Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }} />
</TouchableOpacity>
</Right>
</Header>
</ImageBackground>
</Drawer>
)
}
}
import React, { Component } from 'react';
import { Image, ImageBackground, Text, ScrollView, View } from 'react-native';
import { Body, Header, Icon, Left, Right, Thumbnail, Card, CardItem } from "native-base";
import { Drawer } from 'react-native-router-flux';
import SidebarContainer from '../containers/SidebarContainer';
import SmallHeadLineComponent from '../components/SmallHeadLineComponent';
export default class UserScreen extends Component {
openDrawer() {
this.drawer._root.open();
};
closeDrawer() {
this.drawer._root.close();
};
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarContainer navigator={this._navigator} />}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
>
<ImageBackground source={require('../../assets/header/blue.jpg')} style={{ width: null }}>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
<Body>
</Body>
<Right>
<Icon onPress={() => (alert('Open Modal'))} type='MaterialIcons' name='mail' style={{ color: 'white', justifyContent: 'center' }} />
</Right>
</Header>
</ImageBackground>
<ScrollView style={{ paddingTop: 10 }}>
<View style={{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
<Thumbnail large source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
</View>
<View>
<Card style={{ marginLeft: 100, width: 200, justifyContent: 'center' }}>
<CardItem style={{ alignItems: 'center' }}>
<Body>
<Text style={{ fontWeight: 'bold', alignItems: 'center', justifyContent: 'center' }}>
kikuchi.user
</Text>
</Body>
</CardItem>
</Card>
</View>
<View>
<SmallHeadLineComponent text={'Sample'} />
</View>
</ScrollView>
</Drawer>
)
}
}
import React, { Component } from 'react';
import { View, Text, ImageBackground, Image, TouchableOpacity, SafeAreaView } from 'react-native';
import { Container, Content, Drawer, Header, Left, Icon, Body, Right, Thumbnail, List, ListItem } from 'native-base';
import { Actions } from 'react-native-router-flux';
export default class SidebarContainer extends Component {
render() {
return (
<Container>
<View style={{ height: 1000 }}>
<Header style={{ height: 65, backgroundColor: 'white' }}>
<Left>
<Text style={{ paddingLeft: 10 }}>
Sidebar Title
</Text>
</Left>
</Header>
<Content>
<List>
<ListItem button noBorder={true} onPress={Actions.HomeScreen} >
<Icon type='Ionicons' name='md-home' />
<Text style={{ paddingLeft: 10 }}>Home</Text>
</ListItem>
<ListItem button noBorder={true} onPress={Actions.NoticeScreen} >
<Icon type='Ionicons' name='ios-notifications' />
<Text style={{ paddingLeft: 10 }}>Notice</Text>
</ListItem>
<ListItem button onPress={Actions.SignInScreen} >
<Icon type='Ionicons' name='ios-remove-circle-outline' />
<Text style={{ paddingLeft: 10 }}>SignOut</Text>
</ListItem>
</List>
</Content>
</View>
</Container>
)
}
}