反应导航：组织应用程序

Question

一般的代码组织问题，因为我是新手来回应原生和反应导航。

我如何组织代码？

目前我所有的工作代码（不包括模块和依赖项）都在一个文件（app.js）中。我无法想象这是正确的方法。我将如何拆分此代码？

页面组件文件夹中的页面是否应该不同？

如果是这样，我会export他们然后import他们进入这个文件？

不知道如何继续。 app.js文件代码如下，我的整个代码库位于：https://github.com/samrao2/practiciatest

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import {
  Button,
  FormLabel,
  FormInput,
  FormValidationMessage,
  Divider } from 'react-native-elements';

//import { Button } from './src/components/Button';
//import { CardSection } from './src/components/CardSection';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'PRACTICIA'
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Image flex="1" resizeMode="cover" imageSrc={{ require: ('./practicialogo.PNG') }} />
<Divider style={{ height: 50, backgroundColor: 'white' }} />

<Text style={styles.textStyle}>Sign up as a...</Text>
<Divider style={{ height: 50, backgroundColor: 'white' }} />
        <Button
        raised
        backgroundColor="#3399ff"
        borderRadius='20'
          onPress={() => navigate('Teacher')}
          title="TEACHER"
        />
        <Divider style={{ height: 15, backgroundColor: 'white' }} />

        <Button
        raised
        backgroundColor="green"
        borderRadius='20'
          onPress={() => navigate('Parent')}
          title="PARENT"
        />
        <Divider style={{ height: 15, backgroundColor: 'white' }} />

        <Button
        raised
        backgroundColor="brown"
        borderRadius='20'
          onPress={() => navigate('Student')}
          title="ADULT STUDENT (18+)"
        />
        <Text style={styles.text2Style}>Already Registered?</Text>
        <Button
        raised
        flex='2'
        backgroundColor="grey"
        borderRadius='20'
          onPress={() => navigate('Login')}
          title="Login"
        />
      </View>
    );
  }
}

class TeacherSignUp extends React.Component {
  static navigationOptions = {
    title: 'TEACHER SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>Sign Up</Text>
        <FormLabel>Email</FormLabel>
        <FormInput />
        <FormLabel>Password</FormLabel>
        <FormInput />
        <FormLabel>First Name</FormLabel>
        <FormInput />
        <FormLabel>LastNme</FormLabel>
        <FormInput />
        <Divider style={{ height: 10, backgroundColor: 'white' }} />
        <Button
        raised
        backgroundColor="brown"
        borderRadius='0'
          // onPress={() => navigate()}
          title="SUBMIT"
        />
      </View>
    );
  }
}
class ParentSignUp extends React.Component {
  static navigationOptions = {
    title: 'PARENT SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>Sign Up</Text>
      </View>
    );
  }
}
class StudentSignUp extends React.Component {
  static navigationOptions = {
    title: 'ADULT STUDENT SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>Sign Up</Text>
      </View>
    );
  }
}

class Login extends React.Component {
  static navigationOptions = {
    title: 'LOGIN',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
      <FormLabel>Email/Username</FormLabel>
      <FormInput />
      <FormLabel>Password</FormLabel>
      <FormInput />
      <Divider style={{ height: 10, backgroundColor: 'white' }} />
      <Button
      raised
      backgroundColor="grey"
      borderRadius='0'
        // onPress={() => navigate()}
        title="SUBMIT"
      />
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Teacher: { screen: TeacherSignUp },
  Parent: { screen: ParentSignUp },
  Student: { screen: StudentSignUp },
  Login: { screen: Login },

});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  textStyle: {
    alignSelf: 'center',
    color: '#617189',
    fontSize: 20,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
},
text2Style: {
  alignSelf: 'center',
  color: '#617189',
  fontSize: 14,
  fontWeight: '300',
  paddingTop: 10,
  paddingBottom: 10
},
titleText: {
  fontSize: 20,
  fontWeight: 'bold',
},
});

Answer 1

1. How should i organize the code?

没有正确的方法来组织您的应用程序。我们的目标是尝试创建模块化组件，这些组件组合在一起构建完整的应用程序。使您的应用程序模块化的另一个好处是，您可以获得可以在需要的地方插入的可重用组件。

2.Should the pages be in their own files?

是。从一个屏幕应用程序看起来似乎并不明显，但是当您开始构建更复杂的应用程序时，您更喜欢在自己的文件中放置页面。

3. Will i have to export and import them ?

是的，您将从他们的特定页面导出它们，然后将其导入到您希望使用它的应用程序中。

数据将使用props从主应用页面传递到组件。

---

文件夹布局与基本示例

App.js
Components
    - HomeScreen
    - Login Screen
    - SettingsScreen
- Config
    - Config files for any library you may have installed(example firebase)
- Helpers
    - HelperFunctions.js(reusable javascript function)

App.js

import React from 'react';
import { Component, StyleSheet, Text, View, ActivityIndicator } from 'react-native';

import HomeScreen from './Components/HomeScreen'

export default class App extends Component{

  render(){
   return(
    <HomeScreen/>
  )
 }
}

HomeScreen.js

import React, { Component } from "react";
import { 
    View,
     Text,
     StyleSheet
     } from "react-native";


export default class HomeScreen extends Component{
    render(){
        return (
            <View>
            <Text> This is the home Screen></Text>
            </View>
        );
    }
}