Question

我们目前正在运行React-Native 0.33

当我们点击下一个按钮时，我们正在尝试使用refs从1个文本输入转到另一个文本输入。密码的经典用户名。

任何人都有任何想法？以下是我们使用的代码。从我在堆栈上发现的其他帖子中，这就是他们所做的;但是，它告诉我们this.refs是未定义的。

更新所以我把问题缩小到了

 render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}

          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

如果我只是在原始渲染中的renderScene函数中渲染下面的代码，它会起作用，但是使用导航器它将无法工作。有谁知道为什么？或者如何让导航器显示以及渲染renderScene中的代码以显示在原始渲染中？

   class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.state={
      username: '',
      password: '',
      myKey: '',
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}

          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
      <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput 
                            ref = "FirstInput"
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}
                            onSubmitEditing={(event) => {
                              this.refs.SecondInput.focus();
                            }}
                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            ref = "SecondInput"
                            style={styles.input}
                            placeholder="Password"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            returnKeyType="done"
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            focus={this.state.focusPassword}
                            >
                        </TextInput>
                      </View>
                </View>
      </View>
      );
  }

Answer 1

尝试使用功能设置参考。像这样：

void log_handle::process_task(std::shared_ptr<crx::evd_thread_job> job) {
    auto j = std::dynamic_pointer_cast<log_job>(job);
    j->log->Printf(0, j->print_str.c_str());
    write(STDOUT_FILENO, j->print_str.c_str(), j->print_str.size());
}
class log_factory {
public:
    log_factory(const std::string& name);
    virtual ~log_factory();
    void print_ts(const char *format, ...) {  //here dispatch the job
        char log_buf[4096] = {0};
        va_list args;
        va_start(args, format);
        vsprintf(log_buf, format, args);
        va_end(args);
        auto job = std::make_shared<log_job>(log_buf, &m_log);
        m_log_th.job_dispatch(job);
    }
public:
    E15_Log m_log;
    std::shared_ptr<log_handle> m_log_handle;
    crx::evd_thread_pool m_log_th;
};

然后您可以使用<TextInput ref={(ref) => { this.FirstInput = ref; }} />而不是this.refs.FirstInput

访问引用

Answer 2

尝试将Navigator的renderScene回调更改为以下内容（基于Navigator文档），因为稍后您将需要导航器对象。

renderScene={(route, navigator) => this.renderScene(route, navigator)}

然后，使用'navigator'而不是'this'来获取引用。

navigator.refs.SecondInput.focus()

React-Native引用未定义文本输入

2 个答案: