반작용 네이티브 심판은 텍스트 입력

Question

우리가 현재 반작용 네이티브 0.33

우리는 그들이 다음 버튼을 쳤을 때 다른 1 개 텍스트 입력에서 이동합니다 심판을 사용하려고 실행하는

에 정의되지 않은. 암호에 대한 기본 사용자 이름입니다.

누구든지 아이디어가 있으십니까? 아래는 우리가 사용하는 코드입니다. 스택에서 발견 한 다른 게시물에서 이것은 그들이 한 일입니다. 그러나 이것이 우리에게 말하고있는 것은 .refs는 정의되지 않았다. 작동 렌더링 원래의 내부에 난 그냥 탐색기로하지만, renderScene 기능에 아래의 코드를 렌더링하는 경우

UPDATE는 그래서 나는

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

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

까지 문제를 축소 한 것이 작동하지 않습니다. 아무도 이유를 아나요? 또는 네비게이터를 표시하고 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

기능을 사용하여 참조를 설정해보십시오. 이처럼 :

<TextInput ref={(ref) => { this.FirstInput = ref; }} /> 

은 그럼 당신은 this.FirstInput 대신 this.refs.FirstInput와 기준에 액세스 할 수 있습니다

Answer 2

당신이 필요합니다 원인 다음 (Navigator 문서 기준)에 네비게이터의 renderScene 콜백을 변경해보십시오 네비게이터 객체.

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

그런 다음 'this'대신 'navigator'를 사용하여 참조 정보를 가져옵니다.

navigator.refs.SecondInput.focus()