javascript - 开发react-native app的正确方法

Question

我是一个 react 原生的新手。我想知道是否有一种“正确”的方法来开发 react native 应用程序？由于文档还很不充分，我怕自己开发的方式很不对，我宁愿现在就改正，而不是等项目扩大了再改。根据我以前的经验，我们不应该将所有页面组合在一个 .js 文件中，但是每个组件如何相互通信？

我目前在 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;

在我的 Login.js 中(其他 .js 文件会类似):

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>
        );
    }
}

我知道有很多发展方式，但我走在正确的轨道上吗？当涉及到组件挂载和卸载时，我很困惑。

Answer 1

您的问题非常模糊，措辞方式使唯一真正的答案是“没有唯一的正确答案”。

我建议查看 Awesome React Native - Seeds好的入门套件列表和 Examples也列出。

组件之间的通信非常简单，在 Facebook's documentation on the subject 中有介绍.

绝对不应该在单个文件中开发整个应用程序。

请记住，您不需要“React native 文档”来开始编写 React Native。首先，您应该了解 React 的基础知识，因为一旦您了解了，您会发现无论您编写的是 Web 应用程序还是 native 应用程序，这些基础知识都适用于相同的应用程序，唯一不同的是所使用的组件。