我是React Native的新手,我正在制作一个示例应用程序,用户可以在其中登录并注册一个新帐户.

我有两门课,

一个是主类索引.网间网操作系统.js和另一个名为register的类.js.在index类中,我说的是如果变量寄存器为true,则呈现寄存器屏幕.

在班级登记册上.js我正试图使用这个函数将变量寄存器设置为false.setState({register:false}),但它不会导致父级(index.ios.js)的重新呈现.这是一个超级(状态)方法还是我缺少的类似方法?我认为父状态没有得到更新的寄存器变量的值.

以下是我的课程:

渲染内部索引.网间网操作系统.js:

render: function() {
    if(this.state.register) {
      return this.renderRegisterScreen();
    }
    else if (this.state.loggedIn) {
      return this.userLoggedIn();
    }
    else {
      return this.renderLoginScreen();
    }
  }

登记js:

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TextInput,
} = React;

var Register = React.createClass({
        render: function() {
        return (
          <View style={styles.container}>
            <View style={styles.rafitoImage}>
              <Image source={require('./logo.png')}></Image>
              <Text style={styles.slogan}>Eliminate the need to wait!</Text>
            </View>
            <View style={styles.bottomSection}>
              <View style={styles.username}>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
                </View>
                <TouchableHighlight style={styles.button}
                  underlayColor='#f1c40f' onPress={this.register}>
                        <Text style={styles.buttonText}>Register</Text>
                </TouchableHighlight>
                <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
                underlayColor='#ffffff'>
                <Text style={styles.signUpText}>Already A Member </Text>
                </TouchableHighlight>
              </View>
            </View>
            <View style={styles.copyright}>
            </View>
          </View>
        );
    },

    resetToLogin: function() {
        this.setState({
            register: false //I want this to re render the home screen with the variable register as false
        });
    }
});

    var styles = StyleSheet.create({
      container: {
        flex : 1
      },
      bottomSection: {
        flex: 5,
        flexDirection: 'row' 
      },
      button: {
            height: 36,
            backgroundColor: '#32c5d2',
            justifyContent: 'center',
            marginTop: 20
        },
      buttonText: {
            fontSize: 18,
            color: 'white',
            alignSelf: 'center'
      },
      signUpText: {
        color: '#3598dc'
      },
      signUp: {
        alignItems: 'flex-end',
        marginTop: 10,
      },
      username: {
        flex: 1,
        padding: 5
      },
      rafitoImage: {
        flex: 3,
        justifyContent: 'center',
        alignItems: 'center',
      },
      copyright: {
        alignItems: 'center'
      },
      usernameInput: {
            height: 36,
            marginTop: 10,
            marginBottom: 10,
            fontSize: 18,
            padding: 5
      },
      copyrightText: {
        color: '#cccccc',
        fontSize: 12
      },
      inputBorder: {
        borderBottomWidth: 1,
        borderBottomColor: '#ececec'
      },
      slogan: {
        color: '#3598dc'
      }
    });

module.exports = Register;

Attempt 1

根据我的答案,我添加了这个索引.网间网操作系统.js

renderRegisterScreen: function() {
    return (
      <Register login={this.login}/>
    )
  }

我把这个加到了我的登记簿上.js

<TouchableHighlight style={styles.signUp} onPress={this.props.login}
                underlayColor='#ffffff'>
                <Text style={styles.signUpText}>Already A Member </Text>
                </TouchableHighlight>

但由于某些原因,它甚至不再进入注册屏幕,它会在注册屏幕呈现时立即执行登录功能.我现在错过了什么?请告知.

谢谢

Update

当我登记为财产时,它起作用,但当我不登记时,它不起作用.我想知道为什么如果有人能贴出来.

谢谢

推荐答案

您可以将函数作为props 传递给子级,然后以这种方式在子级内部设置父级的状态.

父组件:

   var Parent = React.createClass({

    getInitialState() {
        return {
            registered: false
        }
    },

  register(){
    console.log("logging in... ");
    this.setState({
        registered: true
    });

  },

  render: function() {
    return (
      <View style={styles.container}>
        <Child register={this.register.bind(this)} registered={this.state.registered} />
      {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
                                    <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
                              </View>}
       </View>
    );
  }
});

子组件:

var Child = React.createClass({

render: function() {
return(
    <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
        <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
 {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
        </TouchableHighlight>                     
    </View>
    ) 
  }
})

React-native相关问答推荐

用图像 react native 动画进度条

如何将 react-native 图像从 expo-image-picker 上传到使用 multer 的 Express.js 后端

不能总是在 Chrome 中设置 React Native 断点

react-native (expo)加载markdown 文件

如何在react-native 中处理不同的屏幕尺寸?

如何启用 stacktrace react-native run-android 命令?

未找到 xcode 'boost/config/user.hpp' 文件

React-Native:显示加载屏幕直到加载 webview

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

React native base headers for ios not found

在 React Native 中无法滚动到 ScrollView 的底部

react native图像不适用于特定 URL

react-native run-android 在设备上构建旧版本的代码

更新 this.state.dataSource 不会更新 ListView

占位符文本在(多行)TextInput for Android(React Native)中的位置

expo 已过期卸载并再次运行以升级

React-Native ios App 在没有报告的情况下崩溃

使用 React Navigation 导航堆栈时重新渲染组件

带有 React Native 的 EventEmitter 和 Subscriber ES6 语法

React Native - 如何从推送通知中打开路由