Android 上带有 react-native 的简单登录屏幕

Question

我正在研究 Android 上的 react-native，并希望实现一个简单的登录屏幕。

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

<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>

当我的登录按钮被点击时，用于将输入的用户名和密码发送回 Android Java 代码的 "Best Practice" 是什么？

目前我已经创建了自定义 ReactContextBaseJavaModule & ReactPackage 以允许我在 Android 应用程序中重新设置值？

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

更新

我的 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);
}

在我的 java 脚本中我有这个：-

var MyLogin  = NativeModules.MyLogin;

这是 "Best Practice" 用于在 react-native 和 Android 之间进行通信的方法吗？

Answer 1

需要知道您在自定义本机模块上实现了什么方法，但假设您有一个名为 Login 的方法使用@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");

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

Android 上带有 react-native 的简单登录屏幕

Simple Login screen with react-native on Android

android

react-native

react-native-android