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


در دنیا صدها زبان مختلف وجود دارد و میلیون ها نفردر هر کشور با زبان رسمی آن صحبت، مکاتبه و کارهای خود را انجام می دهند.حتی در بعضی کشور ها مثل هند 14 زبان مختلف وجود دارد .با پشتیبانی از زبان های مختلف ما می توانیم امکانات بیشتری به کاربران اپلیکیشن خود بدهیم و آن ها را متقاعد کنیم که برایمان مهم هستند و برای هر گروهی از کاربران احترام قائل هستیم حتی اگر تعدادشان کم باشد.کابران به راحتی می توانند زبان خود را یا زبانی که بیشتر به آن آشنا هستند را انتخاب کنند تا زبان برنامه تغییر پیدا کنید. در react native ما از کابخانه react-native-localization چند زبانه کردن را در اپلیکیشن فراهم می کنیم.
توجه داشته باشید که در این آموزش ما به کاربر در صفحه اول زبان های پشتیبانی شده را نشان می دهیم سپس کابر با کلیک بر روی هر زبان به صفحه ای دیگر منتقل می شود که در header زبان انتخابی کاربر با زبان انگلیسی نمایش داده می شود و بدنه صفحه عبارات با زبان انتخاب شده نمایش داده خواهد شد.
1.دایرکتوری پروژه خود را در Command Prompt یا Terminal باز کنید و دستور زیر را در آن برای نصب کتابخانه react-native-localization اجرا کنید.
1 |
npm install react-native-localization --save |
2.در گام بعدی برای جابجایی بین صفحات ما باید کتابخانه React Navigation را نصب کنیم.برای این منظور دایرکتوری پروژه را در Command Prompt یا Terminal باز کنید و دستور زیر را اجرا کنید.
1 |
npm install react-navigation --save |
3.گام بعدی نصب کتابخانه Gesture Handler است.این کتابخانه برای استفاده از React Navigation باید حتما نصب شود.مقاله آشنایی وکار با React Navigation 3 می توانید دوره آموزش react navigation 3 را مشاهده کنید.
1 |
npm install react-native-gesture-handler --save |
4.گام نهایی و مهم link کردن کتابخانه های نصب شده به پروژه است.برای این منظور دستور زیر را در دایرکتوری پروژه اجرا کنید.
1 |
react-native link |
5.حالا نوبت به کدنویسی است.کامپوننت های StyleSheet, Text, View, Image, ScrollView و TouchableOpacity را در فایل App.js ایمپورت کنید.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native'; |
6.کامپوننت LocalizedStrings را از کتابخانه react-native-localization ایمپورت کنید.
1 |
import LocalizedStrings from 'react-native-localization'; |
7.createStackNavigator و createAppContainer را از کتابخانه react navigation ایمپورت کنید.
1 |
import { createStackNavigator, createAppContainer } from 'react-navigation'; |
8.ایجاد یک متغیر string از نوع constant به نام All_Language_Strings با استفاده از کامپوننت LocalizedStrings.همونطور که در کدهای زیر مشاهده می کنید ابتدا یک object برای زبان های مختلف ایجاد کرده ام و برای هر زبان نیز یک objec دیگر که اطلاعات هر زبان را نگه داری می کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 بعدی استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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> ); } } |
10.ایجاد یک کلاس دیگر به نام HomeScreen. این کلاس به عنوان صفحه ای خواهد بود که تمامی محتوا بر اساس زبان انتخاب شده نمایش داده می شود.
omponentDidMount : درون این Life Cycle ما به صورت خودکار عنوان صفحه را تغییر می دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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> ); } } |
11.ایجاد یک متغیر از نوع constant به نام Root و پاس دادن هر دو کلاس به آن با استفاده از createStackNavigator.بعد از این کار شما می توانید Root object را درون createAppContainer فراخوانی کنید.
1 2 3 4 5 6 7 8 9 10 11 |
const Root = createStackNavigator( { Home: Select_Language_Screen, Second: HomeScreen }, { initialRouteName: "Home" } ); export default createAppContainer(Root); |
12.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 ( <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 } }); |
اسکرین شات:
دیدگاهتان را بنویسید