Преглед на файлове

Adds changes to example-redux showcasing passing props functionality

Yedidya Kennard преди 9 години
родител
ревизия
11b1a1a87f

+ 40
- 10
example-redux/src/app.js Целия файл

41
             title: 'Login',
41
             title: 'Login',
42
             navigatorStyle: {},
42
             navigatorStyle: {},
43
             passProps: {
43
             passProps: {
44
-              passed: 'This is a prop passed in \'startSingleScreenApp\'!',
45
-              deep: {
46
-                deepProp: 123,
47
-                deeper: {
48
-                  deeperProp: 'Deep!'
49
-                }
50
-              }
44
+              str: 'This is a prop passed in \'startSingleScreenApp()\'!',
45
+              obj: {
46
+                str: 'This is a prop passed in an object!',
47
+                arr: [
48
+                  {
49
+                    str: 'This is a prop in an object in an array in an object!'
50
+                  }
51
+                ],
52
+                arr2: [
53
+                    [
54
+                        'array of strings',
55
+                        'with two strings'
56
+                    ],
57
+                    [
58
+                        1, 2, 3
59
+                    ]
60
+                ]
61
+              },
62
+              num: 1234
51
             }
63
             }
52
           }
64
           }
53
         });
65
         });
63
               title: 'Screen One',
75
               title: 'Screen One',
64
               navigatorStyle: {},
76
               navigatorStyle: {},
65
               passProps: {
77
               passProps: {
66
-                passed: 'This is a prop passed in \'startTabBasedApp\'!'
67
-  }
78
+                str: 'This is a prop passed in \'startTabBasedApp\'!',
79
+                obj: {
80
+                  str: 'This is a prop passed in an object!',
81
+                  arr: [
82
+                    {
83
+                      str: 'This is a prop in an object in an array in an object!'
84
+                    }
85
+                  ]
86
+                },
87
+                num: 1234
88
+              }
68
             },
89
             },
69
             {
90
             {
70
               label: 'Two',
91
               label: 'Two',
74
               title: 'Screen Two',
95
               title: 'Screen Two',
75
               navigatorStyle: {},
96
               navigatorStyle: {},
76
               passProps: {
97
               passProps: {
77
-                passed: 'This is a prop passed in \'startTabBasedApp\'!'
98
+                str: 'This is a prop passed in \'startTabBasedApp\'!',
99
+                obj: {
100
+                  str: 'This is a prop passed in an object!',
101
+                  arr: [
102
+                    {
103
+                      str: 'This is a prop in an object in an array in an object!'
104
+                    }
105
+                  ]
106
+                },
107
+                num: 1234
78
               }
108
               }
79
             }
109
             }
80
           ],
110
           ],

+ 27
- 4
example-redux/src/screens/FirstTabScreen.js Целия файл

38
   };
38
   };
39
 
39
 
40
   static propTypes = {
40
   static propTypes = {
41
-    passed: PropTypes.string.isRequired
41
+    str: PropTypes.string.isRequired,
42
+    obj: PropTypes.object.isRequired,
43
+    num: PropTypes.number.isRequired
42
   };
44
   };
43
 
45
 
44
   constructor(props) {
46
   constructor(props) {
82
           <Text style={styles.button}>Modal Screen</Text>
84
           <Text style={styles.button}>Modal Screen</Text>
83
         </TouchableOpacity>
85
         </TouchableOpacity>
84
 
86
 
85
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
87
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
88
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
89
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
90
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
86
       </View>
91
       </View>
87
     );
92
     );
88
   }
93
   }
96
       title: "More",
101
       title: "More",
97
       screen: "example.PushedScreen",
102
       screen: "example.PushedScreen",
98
       passProps: {
103
       passProps: {
99
-        passed: 'This is a prop passed in \'navigator.push()\'!'
104
+        passed: 'This is a prop passed in \'navigator.push()\'!',
105
+        obj: {
106
+          str: 'This is a prop passed in an object!',
107
+          arr: [
108
+            {
109
+              str: 'This is a prop in an object in an array in an object!'
110
+            }
111
+          ]
112
+        },
113
+        num: 1234
100
       }
114
       }
101
     });
115
     });
102
   }
116
   }
106
       title: "Modal Screen",
120
       title: "Modal Screen",
107
       screen: "example.PushedScreen",
121
       screen: "example.PushedScreen",
108
       passProps: {
122
       passProps: {
109
-        passed: 'This is a prop passed in \'navigator.showModal()\'!'
123
+        passed: 'This is a prop passed in \'navigator.showModal()\'!',
124
+        obj: {
125
+          str: 'This is a prop passed in an object!',
126
+          arr: [
127
+            {
128
+              str: 'This is a prop in an object in an array in an object!'
129
+            }
130
+          ]
131
+        },
132
+        num: 1234
110
       }
133
       }
111
     });
134
     });
112
   }
135
   }

+ 9
- 3
example-redux/src/screens/LoginScreen.js Целия файл

14
 class LoginScreen extends Component {
14
 class LoginScreen extends Component {
15
 
15
 
16
   static propTypes = {
16
   static propTypes = {
17
-    passed: PropTypes.string.isRequired
17
+    str: PropTypes.string.isRequired,
18
+    obj: PropTypes.object.isRequired,
19
+    num: PropTypes.number.isRequired
18
   };
20
   };
19
 
21
 
20
   constructor(props) {
22
   constructor(props) {
21
     super(props);
23
     super(props);
24
+    console.log(props);
22
   }
25
   }
23
 
26
 
24
   render() {
27
   render() {
37
           <Text style={styles.button}>Login</Text>
40
           <Text style={styles.button}>Login</Text>
38
         </TouchableOpacity>
41
         </TouchableOpacity>
39
 
42
 
40
-
41
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
43
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
44
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
45
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
46
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
47
+        <Text style={{fontWeight: '500'}}>Array of arrays prop: {JSON.stringify(this.props.obj.arr2)}</Text>
42
 
48
 
43
       </View>
49
       </View>
44
     );
50
     );

+ 33
- 4
example-redux/src/screens/PushedScreen.js Целия файл

24
   };
24
   };
25
 
25
 
26
   static propTypes = {
26
   static propTypes = {
27
-    passed: PropTypes.string.isRequired
27
+    str: PropTypes.string.isRequired,
28
+    obj: PropTypes.object.isRequired,
29
+    num: PropTypes.number.isRequired
28
   };
30
   };
29
 
31
 
30
   constructor(props) {
32
   constructor(props) {
76
 
78
 
77
         <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}/>
79
         <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}/>
78
 
80
 
79
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
81
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
82
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
83
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
84
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
80
 
85
 
81
       </View>
86
       </View>
82
     );
87
     );
89
   onPushPress() {
94
   onPushPress() {
90
     this.props.navigator.push({
95
     this.props.navigator.push({
91
       title: "More",
96
       title: "More",
92
-      screen: "example.PushedScreen"
97
+      screen: "example.PushedScreen",
98
+      passProps: {
99
+        passed: 'This is a prop passed in \'navigator.push()\'!',
100
+        obj: {
101
+          str: 'This is a prop passed in an object!',
102
+          arr: [
103
+            {
104
+              str: 'This is a prop in an object in an array in an object!'
105
+            }
106
+          ]
107
+        },
108
+        num: 1234
109
+      }
93
     });
110
     });
94
   }
111
   }
95
 
112
 
100
   onShowModalPress() {
117
   onShowModalPress() {
101
     this.props.navigator.showModal({
118
     this.props.navigator.showModal({
102
       title: "Modal Screen",
119
       title: "Modal Screen",
103
-      screen: "example.PushedScreen"
120
+      screen: "example.PushedScreen",
121
+      passProps: {
122
+        passed: 'This is a prop passed in \'navigator.showModal()\'!',
123
+        obj: {
124
+          str: 'This is a prop passed in an object!',
125
+          arr: [
126
+            {
127
+              str: 'This is a prop in an object in an array in an object!'
128
+            }
129
+          ]
130
+        },
131
+        num: 1234
132
+      }
104
     });
133
     });
105
   }
134
   }
106
 
135
 

+ 7
- 2
example-redux/src/screens/SecondTabScreen.js Целия файл

20
   };
20
   };
21
 
21
 
22
   static propTypes = {
22
   static propTypes = {
23
-    passed: PropTypes.string.isRequired
23
+    str: PropTypes.string.isRequired,
24
+    obj: PropTypes.object.isRequired,
25
+    num: PropTypes.number.isRequired
24
   };
26
   };
25
 
27
 
26
   constructor(props) {
28
   constructor(props) {
43
             <Text style={styles.button}>Increment Counter</Text>
45
             <Text style={styles.button}>Increment Counter</Text>
44
           </TouchableOpacity>
46
           </TouchableOpacity>
45
 
47
 
46
-          <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
48
+          <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
49
+          <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
50
+          <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
51
+          <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
47
 
52
 
48
         </View>
53
         </View>
49
 
54