在Android上使用react-native的简单登录屏幕

Question

我正在调查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之间进行通信？

Answer 1

需要知道你实现什么方法定制本机模块，但让想象你有一个名为登录 使用@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"); 

而且不要忘记注册自定义模块正确