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

Question

我是一名反应型新手。 我想知道是否有“正确”的方式来开发本机应用程序？ 由于文档仍然非常不足，因此恐怕我可能会以非常不正确的方式开发它，并且我宁愿现在纠正错误，而不是在项目扩展之后。 根据我以前的经验，我们不应该将所有页面组合到一个.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中（other.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的主题文档对此进行了介绍。

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

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

Answer 2

刚开始时我打算投票赞成结束这个问题，但是如果我们只看一眼正确的眼镜，那一定会令人着迷并且与技术有关：)

1. 首先，您应该注意您有很多嵌套的<View>组件。 这可以重新构造，其中用户名和密码标签+文本输入都将作为组件应用-接收文本标签和onChangeText作为道具。

2. Login和Register按钮也是如此，将它们创建为单独的组件，在其中定义按钮的标题，loginOnPress / registerOnPress函数作为道具。

3. 请记住在需要时使用propTypes 。 这可以帮助您和其他开发人员跟踪不同组件中发生的情况以及它们之间的相互关系。 例如： Login.propTypes = { navigator: PropType.func.isRequired}

4. 在您的项目中使用Flow（ http://flowtype.org ）来获取类型和注释。