آموزش React Native - چندزبانه کردن اپلیکیشن

در دنیا صدها زبان مختلف وجود دارد و میلیون ها نفردر هر کشور با زبان رسمی آن صحبت، مکاتبه و کارهای خود را انجام می دهند.حتی در بعضی کشور ها مثل هند 14 زبان مختلف وجود دارد .با پشتیبانی از زبان های مختلف ما می توانیم امکانات بیشتری به کاربران اپلیکیشن خود بدهیم و آن ها را متقاعد کنیم که برایمان مهم هستند و برای هر گروهی از کاربران احترام قائل هستیم حتی اگر تعدادشان کم باشد.کابران به راحتی می توانند زبان خود را یا زبانی که بیشتر به آن آشنا هستند را انتخاب کنند تا زبان برنامه تغییر پیدا کنید. در react native ما از کابخانه react-native-localization چند زبانه کردن را در اپلیکیشن فراهم می کنیم.

توجه داشته باشید که در این آموزش ما به کاربر در صفحه اول زبان های پشتیبانی شده را نشان می دهیم سپس کابر با کلیک بر روی هر زبان به صفحه ای دیگر منتقل می شود که در header زبان انتخابی کاربر با زبان انگلیسی نمایش داده می شود و بدنه صفحه عبارات با زبان انتخاب شده نمایش داده خواهد شد.

1.دایرکتوری پروژه خود را در Command Prompt یا Terminal باز کنید و دستور زیر را در آن برای نصب کتابخانه react-native-localization اجرا کنید.

npm install react-native-localization --save

1	npm install react-native-localization --save

2.در گام بعدی برای جابجایی بین صفحات ما باید کتابخانه React Navigation را نصب کنیم.برای این منظور دایرکتوری پروژه را در Command Prompt یا Terminal باز کنید و دستور زیر را اجرا کنید.

npm install react-navigation --save

1	npm install react-navigation --save

3.گام بعدی نصب کتابخانه Gesture Handler است.این کتابخانه برای استفاده از React Navigation باید حتما نصب شود.مقاله آشنایی وکار با React Navigation 3 می توانید دوره آموزش react navigation 3 را مشاهده کنید.

npm install react-native-gesture-handler --save

1	npm install react-native-gesture-handler --save

4.گام نهایی و مهم link کردن کتابخانه های نصب شده به پروژه است.برای این منظور دستور زیر را در دایرکتوری پروژه اجرا کنید.

react-native link

1	react-native link

5.حالا نوبت به کدنویسی است.کامپوننت های StyleSheet, Text, View, Image, ScrollView و TouchableOpacity را در فایل App.js ایمپورت کنید.

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

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';

6.کامپوننت LocalizedStrings را از کتابخانه react-native-localization ایمپورت کنید.

import LocalizedStrings from 'react-native-localization';

1	import LocalizedStrings from 'react-native-localization';

7.createStackNavigator و createAppContainer را از کتابخانه react navigation ایمپورت کنید.

import { createStackNavigator, createAppContainer } from 'react-navigation';

1	import { createStackNavigator, createAppContainer } from 'react-navigation';

8.ایجاد یک متغیر string از نوع constant به نام All_Language_Strings با استفاده از کامپوننت LocalizedStrings.همونطور که در کدهای زیر مشاهده می کنید ابتدا یک object برای زبان های مختلف ایجاد کرده ام و برای هر زبان نیز یک objec دیگر که اطلاعات هر زبان را نگه داری می کند.

onst All_Language_Strings = new LocalizedStrings({
  "hi": {
    text_1: "हैलो दोस्तों.",
    text_2: "हमारी वैबसाइट पर आपका स्वागत है.",
  },
  "en": {
    text_1: "Hello Guys.",
    text_2: "Welcome to our Website.",
  },
  "fr": {
    text_1: "Bonjour les gars.",
    text_2: "Bienvenue sur notre site.",
  },
  "sp": {
    text_1: "Hola chicos.",
    text_2: "Bienvenido a nuestro sitio web.",
  }
});

onst All_Language_Strings = new LocalizedStrings({

"hi": {

text_1: "हैलो दोस्तों.",

text_2: "हमारी वैबसाइट पर आपका स्वागत है.",

"en": {

text_1: "Hello Guys.",

text_2: "Welcome to our Website.",

"fr": {

text_1: "Bonjour les gars.",

text_2: "Bienvenue sur notre site.",

"sp": {

text_1: "Hola chicos.",

text_2: "Bienvenido a nuestro sitio web.",

}

});

9.ایجاد یک کلاس جدید به نام Select_Language_Screen.این کلاس به عنوان home screen ما خواهد بود که در آن کاربر زبان مورد نظر خود را انتخاب می کند.

navigationOptions: برای تنظیم متن عنوان مورد استفاده قرار می گیرد.
this.lang :یک آرایه برای ایجاد یک listview ساده و نمایش زبان های مختلف است.
navigate_To_Next_Activity : این method در رویدادد onPress کامپوننت Touchable Opacity برای جابجایی به screen بعدی استفاده می شود.

class Select_Language_Screen extends Component {
 
  static navigationOptions =
    {
      title: 'Select_Language_Screen',
      header: null
    };
 
  constructor(props) {
    super(props);
    this.lang = [
      { shortName: 'hi', longName: 'Hindi' },
      { shortName: 'en', longName: 'English' },
      { shortName: 'fr', longName: 'French' },
      { shortName: 'sp', longName: 'Spanish' },
    ];
  }
 
  navigate_To_Next_Activity(item) {
 
    All_Language_Strings.setLanguage(item);
 
    this.props.navigation.navigate('Second', { Language_Code: item });
 
  }
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.heading}>
          Please Select Your Language
        </Text>
 
        <Image
          source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }}
          style={styles.imageStyle}
        />
 
        <ScrollView style={{ marginTop: 30, width: '80%' }}>
          {
            this.lang.map((item, key) => (
 
              <TouchableOpacity key={key} onPress={this.navigate_To_Next_Activity.bind(this, item.shortName)}>
 
                <Text style={styles.text} >{item.longName} </Text>
 
                <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} />
 
              </TouchableOpacity>
 
            ))
          }
        </ScrollView>
 
      </View>
    );
  }
}

class Select_Language_Screen extends Component {

static navigationOptions =

{

title: 'Select_Language_Screen',

header: null

};

constructor(props) {

super(props);

this.lang = [

{ shortName: 'hi', longName: 'Hindi' },

{ shortName: 'en', longName: 'English' },

{ shortName: 'fr', longName: 'French' },

{ shortName: 'sp', longName: 'Spanish' },

];

}

navigate_To_Next_Activity(item) {

All_Language_Strings.setLanguage(item);

this.props.navigation.navigate('Second', { Language_Code: item });

}

render() {

return (

Please Select Your Language

</Text>

<Image

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }}

style={styles.imageStyle}

{

this.lang.map((item, key) => (

<Text style={styles.text} >{item.longName} </Text>

</TouchableOpacity>

))

}

</ScrollView>

</View>

);

}

10.ایجاد یک کلاس دیگر به نام HomeScreen. این کلاس به عنوان صفحه ای خواهد بود که تمامی محتوا بر اساس زبان انتخاب شده نمایش داده می شود.

omponentDidMount : درون این Life Cycle ما به صورت خودکار عنوان صفحه را تغییر می دهیم.

lass HomeScreen extends Component {
 
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('Title', 'Default Title'),
    };
  };
  componentDidMount() {
    var that = this;
    var heading = '';
    if (this.props.navigation.state.params.Language_Code == 'hi') {
      heading = 'Selected Language Hindi';
    } else if (
      this.props.navigation.state.params.Language_Code == 'en'
    ) {
      heading = 'Selected Language English';
    } else if (
      this.props.navigation.state.params.Language_Code == 'fr'
    ) {
      heading = 'Selected Language French';
    }
    else if (
      this.props.navigation.state.params.Language_Code == 'sp'
    ) {
      heading = 'Selected Language Spanish';
    }
    that.props.navigation.setParams({
      Title: heading,
    });
  }
 
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.text}> {All_Language_Strings.text_1}</Text>
 
        <Text style={styles.text}> {All_Language_Strings.text_2} </Text>
 
      </View>
    );
  }
}

lass HomeScreen extends Component {

static navigationOptions = ({ navigation }) => {

return {

title: navigation.getParam('Title', 'Default Title'),

};

componentDidMount() {

var that = this;

var heading = '';

if (this.props.navigation.state.params.Language_Code == 'hi') {

heading = 'Selected Language Hindi';

} else if (

this.props.navigation.state.params.Language_Code == 'en'

) {

heading = 'Selected Language English';

} else if (

this.props.navigation.state.params.Language_Code == 'fr'

) {

heading = 'Selected Language French';

}

else if (

this.props.navigation.state.params.Language_Code == 'sp'

) {

heading = 'Selected Language Spanish';

}

that.props.navigation.setParams({

Title: heading,

});

}

render() {

return (

<Text style={styles.text}> {All_Language_Strings.text_1}</Text>

<Text style={styles.text}> {All_Language_Strings.text_2} </Text>

</View>

);

}

11.ایجاد یک متغیر از نوع constant به نام Root و پاس دادن هر دو کلاس به آن با استفاده از createStackNavigator.بعد از این کار شما می توانید Root object را درون createAppContainer فراخوانی کنید.

ایجاد Accordion در React Native

const Root = createStackNavigator(
  {
    Home: Select_Language_Screen,
    Second: HomeScreen
  },
  {
    initialRouteName: "Home"
  }
);
 
export default createAppContainer(Root);

const Root = createStackNavigator(

{

Home: Select_Language_Screen,

Second: HomeScreen

{

initialRouteName: "Home"

}

);

export default createAppContainer(Root);

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

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  heading: {
    color: '#000',
    fontSize: 28,
    textAlign: 'center',
    marginTop: 40
  },
  imageStyle: {
    width: 64,
    height: 64,
    marginTop: 30
  },
  text: {
    color: '#000',
    fontSize: 24,
    textAlign: 'center',
    padding: 10
  }
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

heading: {

color: '#000',

fontSize: 28,

textAlign: 'center',

marginTop: 40

imageStyle: {

width: 64,

height: 64,

marginTop: 30

text: {

color: '#000',

fontSize: 24,

textAlign: 'center',

padding: 10

}

});

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

import React, { Component } from 'react';
 
import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';
 
import LocalizedStrings from 'react-native-localization';
 
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
const All_Language_Strings = new LocalizedStrings({
  "hi": {
    text_1: "हैलो दोस्तों.",
    text_2: "हमारी वैबसाइट पर आपका स्वागत है.",
  },
  "en": {
    text_1: "Hello Guys.",
    text_2: "Welcome to our Website.",
  },
  "fr": {
    text_1: "Bonjour les gars.",
    text_2: "Bienvenue sur notre site.",
  },
  "sp": {
    text_1: "Hola chicos.",
    text_2: "Bienvenido a nuestro sitio web.",
  }
});
 
class Select_Language_Screen extends Component {
 
  static navigationOptions =
    {
      title: 'Select_Language_Screen',
      header: null
    };
 
  constructor(props) {
    super(props);
    this.lang = [
      { shortName: 'hi', longName: 'Hindi' },
      { shortName: 'en', longName: 'English' },
      { shortName: 'fr', longName: 'French' },
      { shortName: 'sp', longName: 'Spanish' },
    ];
  }
 
  navigate_To_Next_Activity(item) {
 
    All_Language_Strings.setLanguage(item);
 
    this.props.navigation.navigate('Second', { Language_Code: item });
 
  }
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.heading}>
          Please Select Your Language
        </Text>
 
        <Image
          source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }}
          style={styles.imageStyle}
        />
 
        <ScrollView style={{ marginTop: 30, width: '80%' }}>
          {
            this.lang.map((item, key) => (
 
              <TouchableOpacity key={key} onPress={this.navigate_To_Next_Activity.bind(this, item.shortName)}>
 
                <Text style={styles.text} >{item.longName} </Text>
 
                <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} />
 
              </TouchableOpacity>
 
            ))
          }
        </ScrollView>
 
      </View>
    );
  }
}
 
class HomeScreen extends Component {
 
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('Title', 'Default Title'),
    };
  };
  componentDidMount() {
    var that = this;
    var heading = '';
    if (this.props.navigation.state.params.Language_Code == 'hi') {
      heading = 'Selected Language Hindi';
    } else if (
      this.props.navigation.state.params.Language_Code == 'en'
    ) {
      heading = 'Selected Language English';
    } else if (
      this.props.navigation.state.params.Language_Code == 'fr'
    ) {
      heading = 'Selected Language French';
    }
    else if (
      this.props.navigation.state.params.Language_Code == 'sp'
    ) {
      heading = 'Selected Language Spanish';
    }
    that.props.navigation.setParams({
      Title: heading,
    });
  }
 
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.text}> {All_Language_Strings.text_1}</Text>
 
        <Text style={styles.text}> {All_Language_Strings.text_2} </Text>
 
      </View>
    );
  }
}
 
const Root = createStackNavigator(
  {
    Home: Select_Language_Screen,
    Second: HomeScreen
  },
  {
    initialRouteName: "Home"
  }
);
 
export default createAppContainer(Root);
 
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  heading: {
    color: '#000',
    fontSize: 28,
    textAlign: 'center',
    marginTop: 40
  },
  imageStyle: {
    width: 64,
    height: 64,
    marginTop: 30
  },
  text: {
    color: '#000',
    fontSize: 24,
    textAlign: 'center',
    padding: 10
  }
});

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

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';

import LocalizedStrings from 'react-native-localization';

import { createStackNavigator, createAppContainer } from 'react-navigation';

const All_Language_Strings = new LocalizedStrings({

"hi": {

text_1: "हैलो दोस्तों.",

text_2: "हमारी वैबसाइट पर आपका स्वागत है.",

"en": {

text_1: "Hello Guys.",

text_2: "Welcome to our Website.",

"fr": {

text_1: "Bonjour les gars.",

text_2: "Bienvenue sur notre site.",

"sp": {

text_1: "Hola chicos.",

text_2: "Bienvenido a nuestro sitio web.",

}

});

class Select_Language_Screen extends Component {

static navigationOptions =

{

title: 'Select_Language_Screen',

header: null

};

constructor(props) {

super(props);

this.lang = [

{ shortName: 'hi', longName: 'Hindi' },

{ shortName: 'en', longName: 'English' },

{ shortName: 'fr', longName: 'French' },

{ shortName: 'sp', longName: 'Spanish' },

];

}

navigate_To_Next_Activity(item) {

All_Language_Strings.setLanguage(item);

this.props.navigation.navigate('Second', { Language_Code: item });

}

render() {

return (

Please Select Your Language

</Text>

<Image

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/06/language_icon.png' }}

style={styles.imageStyle}

{

this.lang.map((item, key) => (

<Text style={styles.text} >{item.longName} </Text>

</TouchableOpacity>

))

}

</ScrollView>

</View>

);

}

class HomeScreen extends Component {

static navigationOptions = ({ navigation }) => {

return {

title: navigation.getParam('Title', 'Default Title'),

};

componentDidMount() {

var that = this;

var heading = '';

if (this.props.navigation.state.params.Language_Code == 'hi') {

heading = 'Selected Language Hindi';

} else if (

this.props.navigation.state.params.Language_Code == 'en'

) {

heading = 'Selected Language English';

} else if (

this.props.navigation.state.params.Language_Code == 'fr'

) {

heading = 'Selected Language French';

}

else if (

this.props.navigation.state.params.Language_Code == 'sp'

) {

heading = 'Selected Language Spanish';

}

that.props.navigation.setParams({

Title: heading,

});

}

render() {

return (

<Text style={styles.text}> {All_Language_Strings.text_1}</Text>

<Text style={styles.text}> {All_Language_Strings.text_2} </Text>

</View>

);

}

const Root = createStackNavigator(

{

Home: Select_Language_Screen,

Second: HomeScreen

{

initialRouteName: "Home"

}

);

export default createAppContainer(Root);

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

heading: {

color: '#000',

fontSize: 28,

textAlign: 'center',

marginTop: 40

imageStyle: {

width: 64,

height: 64,

marginTop: 30

text: {

color: '#000',

fontSize: 24,

textAlign: 'center',

padding: 10

}

});

اسکرین شات:

آموزش React Native – چندزبانه کردن اپلیکیشن

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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