开发本机应用程序的正确方法

Question

I am a react-native newbie. I am wondering if there is a "correct" way to develop a react-native app? As the documentation is still very insufficient, I am afraid I may develop it in the very incorrect manner, and I prefer correct the mistake now, rather than after the project expands. From what I understand from my previous experience, we should not combine all pages in a single .js file, but how can each component communicate with each other?

I am currently doing like this inside index.android.js:

import Login from './Login';
import Register from './Register';
import Home from './Home';

class TheProject extends Component {
    renderScene (route, navigator) {
        _navigator = navigator;
        switch (route.index) {
            case 'Login':
                return (
                    <View style={styles.container}>
                        <Login navigator={navigator} />
                    </View>
                );
            case 'Register':
                return (
                    <View style={styles.container}>
                        <Register navigator={navigator} />
                    </View>
                );
        }
    }
    render() {
        return (
            <Navigator
                initialRoute={{index: 'Login'}}
                renderScene={this.renderScene}
            />
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        backgroundColor: '#F0F0F0',
        flexWrap:'wrap'
    },
});

AppRegistry.registerComponent('TheProject', function() { return TheProject });
module.exports = TheProject;

and in my Login.js (other.js file will be similar):

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username: '',
            password: '',
        };
    }
    registerOnPress() {
        this.props.navigator.push({
            index: 'Register'
        });
    }
    loginOnPress() {
        if (this.state.username != '' &&  this.state.password != '') {
            Alert.alert('Success!', 'Successfully logged in.');
            this.props.navigator.push({
                index: 'Home'
            });
        } else {
            Alert.alert('Failed to log-in', 'Wrong username or password');
        }
    }
    render () {
        return (
            <View style={styles.individualContainer}>
                <View style={styles.content}>
                    <View style={styles.formField}>
                        <View style={styles.input}>
                            <Text style={styles.label}>Username : </Text>
                            <View style={styles.fieldBox}>
                                <TextInput 
                                    style={styles.field}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={(data) => this.setState({ username: data })}
                                />
                            </View>
                        </View>
                        <View style={styles.input}>
                            <Text style={styles.label}>Password : </Text>
                            <View style={styles.fieldBox}>
                                <TextInput 
                                    style={styles.field}
                                    underlineColorAndroid={'transparent'}
                                    secureTextEntry={true}
                                    onChangeText={(data) => this.setState({ password: data })}
                                />
                            </View>
                        </View>
                    </View>
                    <View style={styles.input}>
                        <TouchableHighlight style={styles.buttonBox} onPress={this.loginOnPress.bind(this)}>
                            <Text style={styles.buttonText}>Login</Text>
                        </TouchableHighlight>
                    </View>
                    <View style={styles.input}>
                        <TouchableHighlight style={styles.buttonBox} onPress={this.registerOnPress.bind(this)}>
                            <Text style={styles.buttonText}>Register</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        );
    }
}

I know there are a lot of ways to develop, but am I on the right track? I am quite blurred when it comes to component mount and unmount.

Answer 1

Your question is very vague, phrased in such a way that the only real answer is "there is no single right answer".

I suggest looking at the Awesome React Native - Seeds list for good starter kits and the Examples list as well.

Communication between components is quite straight-forwarded and is covered by Facebook's documentation on the subject .

You should definitely not develop your entire application in a single file.

Keep in mind that you do not need "React native documentation" to write react native at the beginning. First you should understand the fundamentals of React because once you do, you'll notice that those fundamentals apply identically whether you're writing a web or native app, the only thing that differs are the components used.

Answer 2

At first I was about to vote for closing this question, but it's somehow fascinating and tech-related if we just look through the right glasses :)

1. At first, you should note you have a lot of nested <View> components. This could be re-structured, where both username and password label + textinput would be applied as a component - receiving text label and onChangeText as props.

2. Same goes with Login and Register buttons, create them as separate component, where you define title of the button and loginOnPress/registerOnPress functions as props.

3. Remember to use propTypes whenever needed. This helps you and other devs to keep on track what happens in different components and how they're related to each other. For instance: Login.propTypes = { navigator: PropType.func.isRequired}

4. Use Flow ( http://flowtype.org ) with you project for types and annotations.