開發本機應用程序的正確方法

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 ）來獲取類型和注釋。