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's documentation on the subject涵盖。

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

请记住，您不需要“React native documentation”来在开头写入native native。首先，您应该了解React的基本原理，因为一旦您这样做，您会注意到无论您是在编写Web应用程序还是本机应用程序，这些基础知识都是相同的，唯一不同的是使用的组件。

Answer 2

起初我打算投票支持关闭这个问题，但如果我们只是通过正确的眼镜看，它会以某种方式引人入胜并与技术相关：）

首先，您应该注意到您有很多嵌套的<View>组件。这可以重新构建，其中用户名和密码标签+ textinput将作为组件应用 - 接收文本标签和onChangeText作为道具。
与登录和注册按钮相同，将它们创建为单独的组件，您可以在其中定义按钮的标题，并将loginOnPress / registerOnPress功能定义为道具。
请务必在需要时使用propTypes。这有助于您和其他开发人员跟踪不同组件中发生的事情以及它们彼此之间的关系。例如：Login.propTypes = { navigator: PropType.func.isRequired}
将Flow（http://flowtype.org）与项目一起用于类型和注释。

开发react-native应用程序的正确方法

2 个答案: