کتابخانه React Native Navigation — راهنمای شروع به استفاده

1// screens.js
2
3import {Navigation} from 'react-native-navigation';
4
5export function registerScreens() {
6  Navigation.registerComponent('Home', () => require('./Home').default);
7  Navigation.registerComponent('Initializing', (sc) => require('./Initializing').default);
8  Navigation.registerComponent('SignIn', () => require('./SignIn').default);
9  Navigation.registerComponent('SignUp', () => require('./SignUp').default);
10  Navigation.registerComponent('Screen2', () => require('./Screen2').default);
11}

1// index.js
2import {Navigation} from 'react-native-navigation';
3import {registerScreens} from './src/screens';
4
5registerScreens();
6
7Navigation.events().registerAppLaunchedListener(() => {
8  Navigation.setRoot({
9    root: {
10      component: {
11        name: 'Initializing'
12      }
13    },
14  });
15});

1// navigation.js
2import { Navigation } from 'react-native-navigation'
3
4export const goToAuth = () => Navigation.setRoot({
5  root: {
6    bottomTabs: {
7      id: 'BottomTabsId',
8      children: [
9        {
10          component: {
11            name: 'SignIn',
12            options: {
13              bottomTab: {
14                fontSize: 12,
15                text: 'Sign In',
16                icon: require('./signin.png')
17              }
18            }
19          },
20        },
21        {
22          component: {
23            name: 'SignUp',
24            options: {
25              bottomTab: {
26                text: 'Sign Up',
27                fontSize: 12,
28                icon: require('./signup.png')
29              }
30            }
31          },
32        },
33      ],
34    }
35  }
36});
37
38export const goHome = () => Navigation.setRoot({
39  root: {
40    stack: {
41      id: 'App',
42      children: [
43        {
44          component: {
45            name: 'Home',
46          }
47        }
48    ],
49    }
50  }
51})

1// config.js
2export const USER_KEY = 'USER_KEY'

1// Initializing.js
2import React from 'react'
3import {
4  View,
5  Text,
6  StyleSheet,
7  AsyncStorage
8} from 'react-native'
9
10import { goToAuth, goHome } from './navigation'
11
12import { USER_KEY } from './config'
13
14export default class Initialising extends React.Component {
15  async componentDidMount() {
16    try {
17      const user = await AsyncStorage.getItem(USER_KEY)
18      console.log('user: ', user)
19      if (user) {
20        goHome()
21      } else {
22        goToAuth()
23      }
24    } catch (err) {
25      console.log('error: ', err)
26      goToAuth()
27    }
28  }
29
30  render() {
31    return (
32      <View style={styles.container}>
33        <Text style={styles.welcome}>Loading</Text>
34      </View>
35    )
36  }
37}
38
39const styles = StyleSheet.create({
40  welcome: {
41    fontSize: 28
42  },
43  container: {
44    flex: 1,
45    justifyContent: 'center',
46    alignItems: 'center'
47  }
48})

1// Home.js
2import React from 'react'
3import {
4  View,
5  Text,
6  Button,
7  StyleSheet,
8  AsyncStorage
9} from 'react-native'
10import { goToAuth } from './navigation'
11import {Navigation} from 'react-native-navigation';
12
13import { USER_KEY } from './config'
14
15export default class Home extends React.Component {
16  static get options() {
17    return {
18      topBar: {
19        title: {
20          text: 'Home'
21        },
22      }
23    };
24  }
25  logout = async () => {
26    try {
27      await AsyncStorage.removeItem(USER_KEY)
28      goToAuth()
29    } catch (err) {
30      console.log('error signing out...: ', err)
31    }
32  }
33  render() {
34    return (
35      <View style={styles.container}>
36        <Text>Hello from Home screen.</Text>
37        <Button
38          onPress={this.logout}
39          title="Sign Out"
40        />
41        <Button
42          onPress={() => {
43            Navigation.push(this.props.componentId, {
44              component: {
45                name: 'Screen2',
46              }
47            });
48          }}
49          title="View next screen"
50        />
51      </View>
52    )
53  }
54}
55
56const styles = StyleSheet.create({
57  container: {
58    flex: 1,
59    justifyContent: 'center',
60    alignItems: 'center'
61  }
62})

1import React from 'react'
2import {
3  View,
4  Text,
5  Button,
6  StyleSheet,
7} from 'react-native'
8import {Navigation} from 'react-native-navigation';
9
10export default class Screen2 extends React.Component {
11  static get options() {
12    return {
13      topBar: {
14        title: {
15          text: 'Screen 2'
16        },
17      }
18    };
19  }
20  render() {
21    return (
22      <View style={styles.container}>
23        <Text>Screen 2</Text>
24        <Button
25          onPress={() => Navigation.pop(this.props.componentId)}
26          title="Go Back"
27        />
28      </View>
29    )
30  }
31}
32
33const styles = StyleSheet.create({
34  container: {
35    flex: 1,
36    justifyContent: 'center',
37    alignItems: 'center'
38  }
39})

1// SignUp.js
2import React from 'react'
3import {
4  View,
5  Button,
6  TextInput,
7  StyleSheet
8} from 'react-native'
9
10export default class SignUp extends React.Component {
11  state = {
12    username: '', password: '', email: '', phone_number: ''
13  }
14  onChangeText = (key, val) => {
15    this.setState({ [key]: val })
16  }
17  signUp = async () => {
18    const { username, password, email, phone_number } = this.state
19    try {
20      // here place your signup logic
21      console.log('user successfully signed up!: ', success)
22    } catch (err) {
23      console.log('error signing up: ', err)
24    }
25  }
26 
27  render() {
28    return (
29      <View style={styles.container}>
30        <TextInput
31          style={styles.input}
32          placeholder='Username'
33          autoCapitalize="none"
34          placeholderTextColor='white'
35          onChangeText={val => this.onChangeText('username', val)}
36        />
37        <TextInput
38          style={styles.input}
39          placeholder='Password'
40          secureTextEntry={true}
41          autoCapitalize="none"
42          placeholderTextColor='white'
43          onChangeText={val => this.onChangeText('password', val)}
44        />
45        <TextInput
46          style={styles.input}
47          placeholder='Email'
48          autoCapitalize="none"
49          placeholderTextColor='white'
50          onChangeText={val => this.onChangeText('email', val)}
51        />
52        <TextInput
53          style={styles.input}
54          placeholder='Phone Number'
55          autoCapitalize="none"
56          placeholderTextColor='white'
57          onChangeText={val => this.onChangeText('phone_number', val)}
58        />
59        <Button
60          title='Sign Up'
61          onPress={this.signUp}
62        />
63      </View>
64    )
65  }
66}
67
68const styles = StyleSheet.create({
69  input: {
70    width: 350,
71    height: 55,
72    backgroundColor: '#42A5F5',
73    margin: 10,
74    padding: 8,
75    color: 'white',
76    borderRadius: 14,
77    fontSize: 18,
78    fontWeight: '500',
79  },
80  container: {
81    flex: 1,
82    justifyContent: 'center',
83    alignItems: 'center'
84  }
85})

1// SignIn.js
2import React from 'react'
3import {
4  View,
5  Text,
6  StyleSheet,
7  TextInput,
8  Button,
9  AsyncStorage
10} from 'react-native'
11
12import { goHome } from './navigation'
13import { USER_KEY } from './config'
14
15export default class SignIn extends React.Component {
16  state = {
17    username: '', password: ''
18  }
19  onChangeText = (key, value) => {
20    this.setState({ [key]: value })
21  }
22  signIn = async () => {
23    const { username, password } = this.state
24    try {
25       // login with provider
26       const user = await AsyncStorage.setItem(USER_KEY, username)
27       console.log('user successfully signed in!', user)
28       goHome()
29    } catch (err) {
30      console.log('error:', err)
31    }
32  }
33  render() {
34    return (
35      <View style={styles.container}>
36        <TextInput
37          style={styles.input}
38          placeholder='Username'
39          autoCapitalize="none"
40          autoCorrect={false}
41          placeholderTextColor='white'
42          onChangeText={val => this.onChangeText('username', val)}
43        />
44        <TextInput
45          style={styles.input}
46          placeholder='Password'
47          autoCapitalize="none"
48          secureTextEntry={true}
49          placeholderTextColor='white'
50          onChangeText={val => this.onChangeText('password', val)}
51        />
52        <Button
53          title='Sign In'
54          onPress={this.signIn}
55        />
56      </View>
57    )
58  }
59}
60
61const styles = StyleSheet.create({
62  input: {
63    width: 350,
64    fontSize: 18,
65    fontWeight: '500',
66    height: 55,
67    backgroundColor: '#42A5F5',
68    margin: 10,
69    color: 'white',
70    padding: 8,
71    borderRadius: 14
72  },
73  container: {
74    flex: 1,
75    justifyContent: 'center',
76    alignItems: 'center'
77  }
78})