在Android上使用react-native的簡單登錄屏幕

我正在調查Android上的react-native並希望實現簡單的登錄屏幕。在Android上使用react-native的簡單登錄屏幕

我已成功地建立了UI在我index.android.js文件，如下所示： -

<View style={styles.container}> 
<TextInput style={{height: 40, width : 300, borderColor: 'gray', borderWidth: 1, marginTop: 8}} 
     onChangeText={(username) => this.setState({username})} 
     placeholder = 'Username' 
     value={this.state.username} 
     returnKeyType = {"next"} 
     autoFocus = {true} 
     onSubmitEditing={(event) => {this.refs.SecondInput.focus();}}/> 
<TextInput style={{height: 40, width : 300, borderColor: 'gray', borderWidth: 1, marginTop: 4}} 
     onChangeText={(password) => this.setState({password})} 
     placeholder = 'Password' 
     secureTextEntry={true} 
     ref='SecondInput' 
     value={this.state.password}/> 
<TouchableHighlight style= {styles.submit} 
     onPress = {this.onPressLoginButton.bind(this)}> 
<Text>L O G I N</Text> 
     </TouchableHighlight> 
     </View>

請告訴我「最佳實踐」的時候，我LOGIN發送輸入的用戶名和密碼回到Android的Java代碼按鈕被點擊？

目前我已經創建了一個自定義的& ReactPackage允許我將值設置回Android應用程序？

onPressLoginButton() { 
    console.log("You tapped the button!"); 
    MyLogin.doLogin(this.state.username, this.state.password) 
    }

UPDATE

我的Java代碼如下所示： -

@ReactMethod 
public void doLogin(String username, String password) { 
    Log.v(LOG_TAG, "public void doLogin(String username, String password) {} username =" + username + " password = " + password); 
    Log.v(LOG_TAG, "public void doLogin(String username, String password) {} mUsername =" + mUsername + " mPassword = " + mPassword); 
    //doLogin(username, password); 
}

，並在我的javascript我有這樣的： -

var MyLogin = NativeModules.MyLogin;

這是「最佳實踐」的方式在react-native和Android之間進行通信？

來源

2017-03-08 Hector

需要知道你實現什麼方法定製本機模塊，但讓想象你有一個名爲登錄使用@ReactMethod註釋調用該方法，然後從JavaScript調用的方法這個樣子的方法：

@ReactMethod 
    public void Login(String username,String password) { 
     // Here what you trying to do 
    if(username.equalsIgnoreCase("")) 
    { 
    // do this 
     ..... 
    } 
    }

，並在javascript

NativeModules.CustomModule.Login("user","pass");

而且不要忘記註冊自定義模塊正確

來源

2017-03-08 16:02:26

我有更新了我的問題，但是很短的故事：是的，我已經完成了你「想象中的」。 – Hector

我有一個很好的想象力，現在我看到你改變了這個問題。你在尋找最佳方法嗎？ –

是的，因爲我來自Android背景（不是RN或JS），我正在尋找Android和RN之間的通信方式，這只是我需要幫助的一個領域。我也想知道如何從RN訪問我的SQLite數據庫來填充ListView？ – Hector

在Android上使用react-native的簡單登錄屏幕

回答

相關問題