React native 无法参考react native中的抽屉布局_React Native

React native 无法参考react native中的抽屉布局

react-native

React native 无法参考react native中的抽屉布局,react-native,React Native,我的Js文件是这样的 "use strict" var React = require('react-native') var { AppRegistry, Component, StyleSheet, Text, View, TouchableNativeFeedback, Image, DrawerLayoutAndroid, Navigator, ListView, ToolbarAndroid } = React; var ToolbarAn

我的Js文件是这样的

"use strict"

var React = require('react-native')
var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableNativeFeedback,
  Image,
  DrawerLayoutAndroid,
  Navigator,
  ListView,
  ToolbarAndroid
} = React;
var ToolbarAndroid = require('ToolbarAndroid');
var Drawer = require('react-native-drawer');
import Screen2 from './Screen2';
import Screen3 from './Screen3';

class Screen1 extends Component {


 openDrawer(){
      this.refs['DRAWER'].openDrawer()
    }

    _handlePress(screen_name,loggedIn) {

      this.refs.DRAWER.closeDrawer(),

      this.refs.navigator.push(
        {id: screen_name,


      })

    }




  renderScene(route, navigator) {


  switch(route.id){
  case 'Screen1':   return (
DrawerLayoutAndroid
       drawerWidth={300}
       ref={'DRAWER'}
       drawerPosition={DrawerLayoutAndroid.positions.Left}
       renderNavigationView={() => navigationView}>
       <View style={styles.container}>
       <ToolbarAndroid
       navIcon={require('image!ic_menu_white')}

       titleColor="white"
       style={styles.toolbar}
       onIconClicked={() => this.openDrawer()}
       onActionSelected={this.onActionSelected} />
       </View>

    <ListView contentContainerStyle={styles.list}
         dataSource={this.state.dataSource}
         renderRow={this.renderItem.bind(this)}
         />
          </DrawerLayoutAndroid>


    );

     case 'Screen2': return (<Screen2 navigator={navigator} />)

     case 'Screen3': return (<Screen3 navigator={navigator}  />)
  }
  }

  render(){


    navigationView = (
              <View style={styles.header}>
              <View style={styles.HeadingContainer}>
              <TouchableNativeFeedback>
              <View style={styles.HeadingItem}>
              <Text style={styles.menuText}>
              Welcome!
              </Text>
              <Text style={styles.menuText}>
              Guest
              </Text>
              </View>
              </TouchableNativeFeedback>
              </View>
              <View style={{flex: 4, backgroundColor: 'white'}}>
              <TouchableNativeFeedback  onPress={this._handlePress.bind(this,'Screen1')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Albums</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              <TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen2')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Member Validation</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              <TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen3')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Settings</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              </View>
              </View>
            );


    return(
    <
       <Navigator
       initialRoute={{id: 'Screen1'}}
       renderScene={this.renderScene.bind(this)}
       ref='navigator'
       configureScene={(route) => {
         if (route.sceneConfig) {
           return route.sceneConfig;
         }
         return Navigator.SceneConfigs.FloatFromRight;
       }} />

    );


  }



}

var styles = StyleSheet.create({
  list: {
      justifyContent: 'center',
      flexDirection: 'row',
      flexWrap: 'wrap'
    },
  renderLoading: {

    padding: 30,
    marginTop: 65,
    alignItems: 'center'

  },
  container: {
    flexDirection: 'column',
    backgroundColor: '#FAFAFA',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  rightContainer: {
    flex: 1,
  },

  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
    margin:20
  },
  movie: {
    height: 150,
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
  },
  titles: {
    fontSize: 10,
    marginBottom: 8,
    width: 90,
    textAlign: 'center',
  },
  header: {
    flex: 1,
    flexDirection: 'column',
  },
  menuContainer: {
    flexDirection: 'row',
  },
  HeadingItem: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    padding: 10,
  },
  HeadingContainer: {
    flex: 1,
    backgroundColor: '#00a2ed',
  },
  menuText: {
    fontSize: 14,
    color: 'black',
  },

  menu: {
    flex: 4,
    fontSize: 12,
    color: 'black',
    margin: 20,
  },
  toolbar: {
    backgroundColor: '#00a2ed',
    height: 56,
  },
});

export default Screen1;

“使用严格的”
var React=require（'React-native'）
变量{
评估学，
组成部分，
样式表，
文本，
看法
可触摸的本地反馈，
形象,，
抽屉式抽屉，
领航员，
ListView，
工具栏安卓
}=反应；
var ToolbarAndroid=require（'ToolbarAndroid'）；
var Drawer=require（'react-native-Drawer'）；
从“/Screen2”导入Screen2；
从“/Screen3”导入Screen3；
类Screen1扩展了组件{
openDrawer（）{
this.refs['DRAWER'].openDrawer（）
}
_扶手（屏幕名称，loggedIn）{
this.refs.DRAWER.closeDrawer（），
this.refs.navigator.push(
{id:screen_name，
})
}
renderScene（路线、导航器）{
交换机（route.id）{
案例“Screen1”：返回(
抽屉式抽屉
抽屉宽度={300}
ref={'DRAWER'}
DroperPosition={DroperLayoutAndroid.positions.Left}
renderNavigationView={（）=>navigationView}>
this.openDrawer（）}
onActionSelected={this.onActionSelected}/>
);
案例“Screen2”：返回（）
案例“Screen3”：返回（）
}
}
render（）{
导航视图=(
欢迎
客人
相册
成员验证
设置
);
返回(
<
{
if（路由场景图）{
返回路线.sceneConfig；
}
从右侧返回Navigator.sceneconfig.floatfrom；
}} />
);
}
}
var styles=StyleSheet.create({
名单：{
为内容辩护：“中心”，
flexDirection:'行'，
flexWrap:“wrap”
},
渲染加载：{
填充：30，
玛金托普：65，
对齐项目：“中心”
},
容器：{
flexDirection:'列'，
背景颜色：“#FAFAFA”，
},
背景图片：{
弹性：1，
resizeMode:'cover'、//或'stretch'
},
rightContainer：{
弹性：1，
},
年份：{
textAlign:'中心'，
},
缩略图：{
宽度：53，
身高：81，
},
列表视图：{
paddingTop:20，
背景颜色：“#F5FCFF”，
差额：20
},
电影：{
身高：150，
弹性：1，
对齐项目：“居中”，
flexDirection:'列'，
},
标题：{
尺寸：10，
marginBottom:8，
宽度：90，
textAlign:'中心'，
},
标题：{
弹性：1，
flexDirection:'列'，
},
菜单容器：{
flexDirection:'行'，
},
标题项目：{
弹性：1，
flexDirection:'列'，
对齐项目：“居中”，
填充：10，
},
头部容器：{
弹性：1，
背景颜色：“#00a2ed”，
},
菜单文本：{
尺寸：14，
颜色：'黑色'，
},
菜单：{
弹性：4，
尺寸：12，
颜色：'黑色'，
差额：20，
},
工具栏：{
背景颜色：“#00a2ed”，
身高：56，
},
});
导出默认屏幕1；

现在我无法引用抽屉引用变量“Drawer”。它给我的错误是未定义的不是对象。无法打开或关闭抽屉

我只想要Screen1的抽屉布局，所以我用RenderScene方法渲染它。若我在render方法中实现抽屉布局，那个么我就能够引用引用抽屉

我们只能在render方法中创建引用。如果是，如何解决此问题。

使用组件的状态对象访问抽屉对象

"use strict"

var React = require('react-native')
var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableNativeFeedback,
  Image,
  DrawerLayoutAndroid,
  Navigator,
  ListView,
  ToolbarAndroid
} = React;
var ToolbarAndroid = require('ToolbarAndroid');
var Drawer = require('react-native-drawer');
import Screen2 from './Screen2';
import Screen3 from './Screen3';

class Screen1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
                drawer: null,
        };
    }

    setDrawer = (drawer) => {
        this.setState({
            drawer
        });
    };

 openDrawer(){
      this.state.drawer.openDrawer()
    }

    _handlePress(screen_name,loggedIn) {

      this.state.drawer.closeDrawer(),

      this.refs.navigator.push(
        {id: screen_name,


      })

    }




  renderScene(route, navigator) {


  switch(route.id){
  case 'Screen1':
        const { drawer } = this.state;
     return (
        <DrawerLayoutAndroid
       drawerWidth={300}
       ref={(drawer) => { !this.state.drawer ? this.setDrawer(drawer) : null }}
       drawerPosition={DrawerLayoutAndroid.positions.Left}
       renderNavigationView={() => navigationView}>
       <View style={styles.container}>
       <ToolbarAndroid
       navIcon={require('image!ic_menu_white')}
       titleColor="white"
       style={styles.toolbar}
       onIconClicked={() => this.openDrawer()}
       onActionSelected={this.onActionSelected} />
       </View>

    <ListView contentContainerStyle={styles.list}
         dataSource={this.state.dataSource}
         renderRow={this.renderItem.bind(this)}
         />
          </DrawerLayoutAndroid>


    );

     case 'Screen2': return (<Screen2 navigator={navigator} />)

     case 'Screen3': return (<Screen3 navigator={navigator}  />)
  }
  }

  render(){


    navigationView = (
              <View style={styles.header}>
              <View style={styles.HeadingContainer}>
              <TouchableNativeFeedback>
              <View style={styles.HeadingItem}>
              <Text style={styles.menuText}>
              Welcome!
              </Text>
              <Text style={styles.menuText}>
              Guest
              </Text>
              </View>
              </TouchableNativeFeedback>
              </View>
              <View style={{flex: 4, backgroundColor: 'white'}}>
              <TouchableNativeFeedback  onPress={this._handlePress.bind(this,'Screen1')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Albums</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              <TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen2')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Member Validation</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              <TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen3')}>
              <View style={styles.menuContainer}>
              <Text style={styles.menu}>Settings</Text>
              <Image
              source={require('image!ic_menu_arrow')}
              style={{flex : 1,width: 10, height: 10, margin: 20}} />
              </View>
              </TouchableNativeFeedback>
              </View>
              </View>
            );


    return(
    <
       <Navigator
       initialRoute={{id: 'Screen1'}}
       renderScene={this.renderScene.bind(this)}
       ref='navigator'
       configureScene={(route) => {
         if (route.sceneConfig) {
           return route.sceneConfig;
         }
         return Navigator.SceneConfigs.FloatFromRight;
       }} />

    );


  }



}

var styles = StyleSheet.create({
  list: {
      justifyContent: 'center',
      flexDirection: 'row',
      flexWrap: 'wrap'
    },
  renderLoading: {

    padding: 30,
    marginTop: 65,
    alignItems: 'center'

  },
  container: {
    flexDirection: 'column',
    backgroundColor: '#FAFAFA',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  rightContainer: {
    flex: 1,
  },

  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
    margin:20
  },
  movie: {
    height: 150,
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
  },
  titles: {
    fontSize: 10,
    marginBottom: 8,
    width: 90,
    textAlign: 'center',
  },
  header: {
    flex: 1,
    flexDirection: 'column',
  },
  menuContainer: {
    flexDirection: 'row',
  },
  HeadingItem: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    padding: 10,
  },
  HeadingContainer: {
    flex: 1,
    backgroundColor: '#00a2ed',
  },
  menuText: {
    fontSize: 14,
    color: 'black',
  },

  menu: {
    flex: 4,
    fontSize: 12,
    color: 'black',
    margin: 20,
  },
  toolbar: {
    backgroundColor: '#00a2ed',
    height: 56,
  },
});

export default Screen1;

“使用严格的”
var React=require（'React-native'）
变量{
评估学，
组成部分，
样式表，
文本，
看法
可触摸的本地反馈，
形象,，
抽屉式抽屉，
领航员，
ListView，
工具栏安卓
}=反应；
var ToolbarAndroid=require（'ToolbarAndroid'）；
var Drawer=require（'react-native-Drawer'）；
从“/Screen2”导入Screen2；
从“/Screen3”导入Screen3；
类Screen1扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
出票人：空，
};
}
设置抽屉=（抽屉）=>{
这是我的国家({
抽屉
});
};
openDrawer（）{
this.state.drawer.openDrawer（）
}
_扶手（屏幕名称，loggedIn）{
this.state.drawer.closeDrawer（），
this.refs.navigator.push(
{id:screen_name，
})
}
renderScene（路线、导航器）{
交换机（route.id）{
案例“屏幕1”：
const{drawer}=this.state；
返回(
{！this.state.drawer？this.setDrawer（drawer）：null}
DroperPosition={DroperLayoutAndroid.positions.Left}
renderNavigationView={（）=>navigationView}>
this.openDrawer（）}
onActionSelected={this.onActionSelected}/>
);
案例“Screen2”：返回（）
案例“Screen3”：返回（）
}
}
render（）{
导航视图=(
欢迎
客人
相册
成员验证
设置
);
返回(
<
{
if（路由场景图）{
返回路线.sceneConfig；
}
从右侧返回Navigator.sceneconfig.floatfrom；
}} />
);
}
}
var styles=StyleSheet.create({
名单：{
为内容辩护：“中心”，
flexDirection:'行'，
  1. navigator.js
  2. screen1.js
 3. screen2.js

   <Navigator
   initialRoute={{id: 'Screen1'}}
   renderScene={this.renderScene.bind(this)}
   ref='navigator'
   configureScene={(route) => {
     if (route.sceneConfig) {
       return route.sceneConfig;
     }
     return Navigator.SceneConfigs.FloatFromRight;
   }} />

renderScene(route, navigator) {
switch(route.id){
case 'Screen1':   return (<Screen1 navigator={navigator}>
);
 case 'Screen2': return (<Screen2 navigator={navigator} />)
 case 'Screen3': return (<Screen3 navigator={navigator}  />)
 }

      <DrawerLayout><Toolbar/><ListView/></DrawerLayout>