ایجاد Drawer Navigator در React Native

Drawer Navigator که با Navigation drawer هم شناخته میشه یکی از زیرساخت های مفید برای نمایش و نگه داشتن لیست screen ها در React Native است.Drawer Navigator تمامی screen ها رو بصورت متوالی با یک sidebar سفارشی مدیریت میکنه.در این آموزش متنی ما ابتدا یک sidebar menu سفارشی ایجاد مکینیم و از این sidebar در Drawer Navigator برای نمایش لیست screen ها و جابجایی بین اون ها استفاده میکنیم.

قبل از اینکه شروع به خوندن این مقاله کنید،قبلش حتما تله فیلم آموزشی ایجاد DrawerLayout در React Native رو مشاهده کنید.در این تله فیلم آموزشی بصورت کامل نحوه ایجاد Drawer Layout رو با استفاده از انیمیشن توضیح دادم.

1.نصب کتابخانه react navigation.برای ایجاد Drawer Navigator از کتابخانه react navigation استفاده میکنیم.بنابراین برای نصب دایرکتوری پروژه رو در (command prompt(Terminal باز مکینیم و دستور زیر رو اجرا میکنیم.

npm install --save react-navigation

1	npm install --save react-navigation

2.ایمپورت کردن کامپوننت های StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox و Dimensions در پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';

3.ایمپورت کردن کامپوننت DrawerNavigator از کتابخانه react-navigation

import { DrawerNavigator } from 'react-navigation';

1	import { DrawerNavigator } from 'react-navigation';

4.ایمپورت کردن StackNavigator از کتابخانه react-navigation.بدون استفاده از StackNavigator ما نمیتونیم چندین کامپوننت داشته باشیم و بین اون ها navigate کنیم.

import { StackNavigator } from 'react-navigation'

1	import { StackNavigator } from 'react-navigation'

5.ایجاد یک کلاس جدید در فایل App.js به نام HamburgerIcon .این کلاس آیکون Hamburger رو در Drawer Navigator قرار میده.

toggleDrawer : این تابع برای باز و بسته شدن drawer navigator با استفاده از ()this.props.navigationProps.toggleDrawer استفاده میشه.

class HamburgerIcon extends Component {
 
  toggleDrawer = () => {
 
    console.log(this.props.navigationProps);
 
    this.props.navigationProps.toggleDrawer();
 
  }
 
  render() {
 
    return (
 
      <View style={{ flexDirection: 'row' }}>
 
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
 
          <Image
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
 
        </TouchableOpacity>
 
      </View>
 
    );
 
 
  }
}

class HamburgerIcon extends Component {

toggleDrawer = () => {

console.log(this.props.navigationProps);

this.props.navigationProps.toggleDrawer();

}

render() {

return (

<Image

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}

style={{ width: 25, height: 25, marginLeft: 5 }}

</TouchableOpacity>

</View>

);

}

6.ایجاد یک کلاس به نام Custom_Side_Menu .از این کلاس به عنوان side menu استفاده میشه و لیست همه کامپوننت ها درون این کلاس قرار میگیره.اگر شما میخواید به صورت اختصاصی یک side menu داشته باشید کافیه که در بلاک render’s return تغییرات رو اعمال کنید.

class Custom_Side_Menu extends Component {
 
  render() {
 
    return (
 
      <View style={styles.sideMenuContainer}>
 
        <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/Guitar.jpg' }}
          style={styles.sideMenuProfileIcon} />
 
        <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
 
        <View style={{width: '100%'}}>
 
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
              <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/social.jpg' }}
              style={styles.sideMenuIcon} />
              
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>
 
            </View>
 
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
              <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}
              style={styles.sideMenuIcon} />
 
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>
 
            </View>
 
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
              <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/outbox.jpg' }}
              style={styles.sideMenuIcon} />
 
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>
 
            </View>
 
 
       </View>
 
       <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
 
 
      </View>
    );
  }
}

class Custom_Side_Menu extends Component {

render() {

return (

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/Guitar.jpg' }}

style={styles.sideMenuProfileIcon} />

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/social.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>

</View>

<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>

</View>

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/outbox.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>

</View>

</View>

);

}

7.ایجاد یک کلاس جدید به نام MainActivity.این کلاس به عنوان صفحه اصلی اپلیکیشن ما خواهد بود.

YellowBox.ignoreWarnings : از این تابع برای پنهان کردن باکس زرد رنگ هشدار در اپلیکیشن استفاده می شود.

class MainActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>
 
      </View>
    );
  }
}

class MainActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>

</View>

);

}

8.ایجاد یک کلاس به نام SecondActivity.این کلاس به عنوان دومین کامپوننت اپلیکیشن استفاده میشه.

class SecondActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>
 
      </View>
    );
  }
}

class SecondActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>

</View>

);

}

9.ایجاد یک کلاس به نام ThirdActivity.این کلاس آخرین کامپوننت ما در اپلیکیشن خواهد بود.

class ThirdActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>
 
      </View>
    );
  }
}

class ThirdActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>

</View>

);

}

10.ایجاد 3 Constant objects به نام های FirstActivity_StackNavigator, SecondActivity_StackNavigator و ThirdActivity_StackNavigator.درون هر کدوم از این ها کلاس HamburgerIcon رو فراخوانی میکنیم و به عنوان headerLeft برای DrawewerNavigator استفاده میکنیم.

const FirstActivity_StackNavigator = StackNavigator({
  First: {
    screen: MainActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'MainActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
 
 
const SecondActivity_StackNavigator = StackNavigator({
  Second: {
    screen: SecondActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'SecondActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
 
 
const ThirdActivity_StackNavigator = StackNavigator({
  Third: {
    screen: ThirdActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'ThirdActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },

const FirstActivity_StackNavigator = StackNavigator({

First: {

screen: MainActivity,

navigationOptions: ({ navigation }) => ({

title: 'MainActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

});

const SecondActivity_StackNavigator = StackNavigator({

Second: {

screen: SecondActivity,

navigationOptions: ({ navigation }) => ({

title: 'SecondActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

});

const ThirdActivity_StackNavigator = StackNavigator({

Third: {

screen: ThirdActivity,

navigationOptions: ({ navigation }) => ({

title: 'ThirdActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

11.استفاده از DrawerNavigator و فراخوانی object هایی که در بالا تعریف کردیم.

contentComponent : فراخوانی کلاس Custom_Side_Menu .

export default MyDrawerNavigator = DrawerNavigator({
  MainStack: {
    screen: FirstActivity_StackNavigator
  },
 
  SecondStack: {
    screen: SecondActivity_StackNavigator
  },
 
  ThirdStack: {
    screen: ThirdActivity_StackNavigator
  }
},
  {
    contentComponent: Custom_Side_Menu,
    drawerWidth: Dimensions.get('window').width - 130,
  });

export default MyDrawerNavigator = DrawerNavigator({

MainStack: {

screen: FirstActivity_StackNavigator

SecondStack: {

screen: SecondActivity_StackNavigator

ThirdStack: {

screen: ThirdActivity_StackNavigator

}

{

contentComponent: Custom_Side_Menu,

drawerWidth: Dimensions.get('window').width - 130,

});

12.ایجاد استایل سفارشی.

const styles = StyleSheet.create({
 
  MainContainer: {
 
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
 
  },
 
  sideMenuContainer: {
 
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 20
  },
 
  sideMenuProfileIcon:
  {
    resizeMode: 'center',
    width: 150, 
    height: 150, 
    borderRadius: 150/2
  },
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/add-show-copyright-symbol-icon/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div class="postImageUrl" style="background-image:url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/add-show-copyright-symbol-icon-300x162.png);"></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">نمایش سمبل © Copyright در react native</div></div></div><div class="ctaButton"></div></div></a></div> 
  sideMenuIcon:
  {
    resizeMode: 'center',
    width: 28, 
    height: 28, 
    marginRight: 10,
    marginLeft: 20
    
  },
 
  menuText:{
 
    fontSize: 15,
    color: '#222222',
    
  }
 
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

alignItems: 'center',

justifyContent: 'center',

sideMenuContainer: {

width: '100%',

height: '100%',

backgroundColor: '#fff',

alignItems: 'center',

paddingTop: 20

sideMenuProfileIcon:

{

resizeMode: 'center',

width: 150,

height: 150,

borderRadius: 150/2

sideMenuIcon:

{

resizeMode: 'center',

width: 28,

height: 28,

marginRight: 10,

marginLeft: 20

menuText:{

fontSize: 15,

color: '#222222',

}

});

13.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';
 
import { DrawerNavigator } from 'react-navigation';
 
import { StackNavigator } from 'react-navigation'
 
class HamburgerIcon extends Component {
 
  toggleDrawer = () => {
 
    console.log(this.props.navigationProps);
 
    this.props.navigationProps.toggleDrawer();
 
  }
 
  render() {
 
    return (
 
      <View style={{ flexDirection: 'row' }}>
 
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
 
          <Image
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
 
        </TouchableOpacity>
 
      </View>
 
    );
 
 
  }
}
 
class Custom_Side_Menu extends Component {
 
 render() {
 
 return (
 
 <View style={styles.sideMenuContainer}>
 
 <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/Guitar.jpg' }}
 style={styles.sideMenuProfileIcon} />
 
 <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
 
 <View style={{width: '100%'}}>
 
 <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
 <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/social.jpg' }}
 style={styles.sideMenuIcon} />
 
 <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>
 
 </View>
 
 <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
 <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}
 style={styles.sideMenuIcon} />
 
 <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>
 
 </View>
 
 <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
 
 <Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/outbox.jpg' }}
 style={styles.sideMenuIcon} />
 
 <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>
 
 </View>
 
 
 </View>
 
 <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
 
 
 </View>
 );
 }
}
 
 
class MainActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>
 
      </View>
    );
  }
}
 
class SecondActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>
 
      </View>
    );
  }
}
 
class ThirdActivity extends Component {
 
  constructor(props) {
 
    super(props);
 
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
 
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>
 
      </View>
    );
  }
}
 
const FirstActivity_StackNavigator = StackNavigator({
  First: {
    screen: MainActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'MainActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
 
 
const SecondActivity_StackNavigator = StackNavigator({
  Second: {
    screen: SecondActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'SecondActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
 
 
const ThirdActivity_StackNavigator = StackNavigator({
  Third: {
    screen: ThirdActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'ThirdActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
 
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
 
export default MyDrawerNavigator = DrawerNavigator({
  MainStack: {
    screen: FirstActivity_StackNavigator
  },
 
  SecondStack: {
    screen: SecondActivity_StackNavigator
  },
 
  ThirdStack: {
    screen: ThirdActivity_StackNavigator
  }
},
  {
    contentComponent: Custom_Side_Menu,
    drawerWidth: Dimensions.get('window').width - 130,
  });
 
 
const styles = StyleSheet.create({
 
  MainContainer: {
 
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
 
  },
 
  sideMenuContainer: {
 
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 20
  },
 
  sideMenuProfileIcon:
  {
    resizeMode: 'center',
    width: 150, 
    height: 150, 
    borderRadius: 150/2
  },
 
  sideMenuIcon:
  {
    resizeMode: 'center',
    width: 28, 
    height: 28, 
    marginRight: 10,
    marginLeft: 20
    
  },
 
  menuText:{
 
    fontSize: 15,
    color: '#222222',
    
  }
 
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';

import { DrawerNavigator } from 'react-navigation';

import { StackNavigator } from 'react-navigation'

class HamburgerIcon extends Component {

toggleDrawer = () => {

console.log(this.props.navigationProps);

this.props.navigationProps.toggleDrawer();

}

render() {

return (

<Image

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}

style={{ width: 25, height: 25, marginLeft: 5 }}

</TouchableOpacity>

</View>

);

}

class Custom_Side_Menu extends Component {

render() {

return (

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/Guitar.jpg' }}

style={styles.sideMenuProfileIcon} />

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/social.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>

</View>

<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>

</View>

<Image source={{ uri: 'https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/outbox.jpg' }}

style={styles.sideMenuIcon} />

<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>

</View>

</View>

);

}

class MainActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>

</View>

);

}

class SecondActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>

</View>

);

}

class ThirdActivity extends Component {

constructor(props) {

super(props);

YellowBox.ignoreWarnings([

'Warning: componentWillMount is deprecated',

'Warning: componentWillReceiveProps is deprecated',

]);

}

render() {

return (

<Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>

</View>

);

}

const FirstActivity_StackNavigator = StackNavigator({

First: {

screen: MainActivity,

navigationOptions: ({ navigation }) => ({

title: 'MainActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

});

const SecondActivity_StackNavigator = StackNavigator({

Second: {

screen: SecondActivity,

navigationOptions: ({ navigation }) => ({

title: 'SecondActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

});

const ThirdActivity_StackNavigator = StackNavigator({

Third: {

screen: ThirdActivity,

navigationOptions: ({ navigation }) => ({

title: 'ThirdActivity',

headerLeft: <HamburgerIcon navigationProps={navigation} />,

headerStyle: {

backgroundColor: '#FF9800'

headerTintColor: '#fff',

})

});

export default MyDrawerNavigator = DrawerNavigator({

MainStack: {

screen: FirstActivity_StackNavigator

SecondStack: {

screen: SecondActivity_StackNavigator

ThirdStack: {

screen: ThirdActivity_StackNavigator

}

{

contentComponent: Custom_Side_Menu,

drawerWidth: Dimensions.get('window').width - 130,

});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

alignItems: 'center',

justifyContent: 'center',

sideMenuContainer: {

width: '100%',

height: '100%',

backgroundColor: '#fff',

alignItems: 'center',

paddingTop: 20

sideMenuProfileIcon:

{

resizeMode: 'center',

width: 150,

height: 150,

borderRadius: 150/2

sideMenuIcon:

{

resizeMode: 'center',

width: 28,

height: 28,

marginRight: 10,

marginLeft: 20

menuText:{

fontSize: 15,

color: '#222222',

}

});

اسکرین شات :

مطالب زیر را حتما مطالعه کنید

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

مریم گفت:

دسامبر 27, 2018 در 2:10 ب.ظ

سلام . تشکر
من از این مقاله استفاده کردم ولی الان دکمه back گوشی به صفحه قبلی بر نمیگرده و به صفحه اول برمیگرده . شما روشی برای حل این مشکل دارین ؟ خیلی کارم فوری هست بی زحمت پاسخ بدین

پاسخ
- علیرضا گفت:
  
  دسامبر 29, 2018 در 9:40 ق.ظ
  
  سلام.
  برای این کار کافیه که تو goback اسم کامپوننت رو قرار بدید
  
  پاسخ
rezamasrori گفت:

آگوست 27, 2018 در 8:15 ب.ظ

شما بی نظرین من خیلی از این سایت چیزایی خوبی یاد گرفتم ممنونم میشم همین طوری اطلاعات در اختیار ما هم بذارین
خیلی خیلی ممنونم

لطفا ادامه بدین هر روز ما منتظر هستیم

پاسخ
- مهدی گفت:
  
  آگوست 28, 2018 در 10:11 ق.ظ
  
  ممنون از لطف و انرژی مثبتتون.
  همین انرژی و انگیزه ای که به ما میدین باعث ادامه کار میشه
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

4 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ