Make screens as React classes to make hot reload work (#2224)

aksonov · Aug 14, 2017 · 701d940 · 701d940
1 parent 35efe6e
commit 701d940
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 30 deletions.
diff --git a/Example/components/Register.js b/Example/components/Register.js
@@ -12,13 +12,13 @@ const styles = StyleSheet.create({
   },
 });
 
-const Register = () => (
-  <View style={styles.container}>
-    <Text>Register page</Text>
-    <Button onPress={()=>Actions.register2()}>Register2</Button>
-    <Button onPress={Actions.home}>Replace screen</Button>
-    <Button onPress={Actions.pop}>Back</Button>
-  </View>
-);
-
-export default Register;
+export default class Register extends React.Component {
+  render() {
+    return <View style={styles.container}>
+      <Text>Register page</Text>
+      <Button onPress={()=>Actions.register2()}>Register</Button>
+      <Button onPress={Actions.home}>Replace screen</Button>
+      <Button onPress={Actions.pop}>Back</Button>
+    </View>
+  }
+}
diff --git a/Example/components/TabView.js b/Example/components/TabView.js
@@ -25,28 +25,29 @@ const styles = StyleSheet.create({
   },
 });
 
-const TabView = (props) => {
-  return (
-    <View style={[styles.container, props.sceneStyle ]}>
-      <Text>Tab title:{props.title} name:{props.name}</Text>
-      <Text>Tab data:{props.data}</Text>
-      {props.name === 'tab1_1' &&
+class TabView extends React.Component {
+  render() {
+    return (
+      <View style={[styles.container, this.props.sceneStyle ]}>
+        <Text>Tab title:{this.props.title} name:{this.props.name}</Text>
+        <Text>Tab data:{this.props.data}</Text>
+        {this.props.name === 'tab1_1' &&
         <Button onPress={()=>Actions.tab1_2()}>next screen for tab1_1</Button>
-      }
-      {props.name === 'tab2_1' &&
+        }
+        {this.props.name === 'tab2_1' &&
         <Button onPress={()=>Actions.tab2_2()}>next screen for tab2_1</Button>
-      }
-      <Button onPress={Actions.pop}>Back</Button>
-      <Button onPress={() => { Actions.tab1(); }}>Switch to tab1</Button>
-      <Button onPress={() => { Actions.tab2(); }}>Switch to tab2</Button>
-      <Button onPress={() => { Actions.tab3(); }}>Switch to tab3</Button>
-      <Button onPress={() => { Actions.tab4(); }}>Switch to tab4</Button>
-      <Button onPress={() => { Actions.tab5({ data: 'test!' }); }}>Switch to tab5 with data</Button>
-      <Button onPress={() => { Actions.echo(); }}>push clone scene (EchoView)</Button>
-    </View>
-  );
-};
-
+        }
+        <Button onPress={Actions.pop}>Back</Button>
+        <Button onPress={() => { Actions.tab1(); }}>Switch to tab1</Button>
+        <Button onPress={() => { Actions.tab2(); }}>Switch to tab2</Button>
+        <Button onPress={() => { Actions.tab3(); }}>Switch to tab3</Button>
+        <Button onPress={() => { Actions.tab4(); }}>Switch to tab4</Button>
+        <Button onPress={() => { Actions.tab5({ data: 'test!' }); }}>Switch to tab5 with data</Button>
+        <Button onPress={() => { Actions.echo(); }}>push clone scene (EchoView)</Button>
+      </View>
+    );
+  }
+}
 TabView.contextTypes = contextTypes;
 TabView.propTypes = propTypes;