ネイティブTouchableHighlightを押すと別の画面が開きます

Question

iamが反応して最初のプロジェクトを開始すると、ログイン画面が表示されます。TouchableHighlightを押すと別の画面を開く必要がありますが、 2番目の画面へのログインからの移動、TouchableHighlightにこれは私のコードである

Login.js

import React, { Component } from 'react'; 
import { AppRegistry, Text,SecureView ,Button,Image,TextInput,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native'; 
require('./HygexListView.js'); 

class LoginView extends Component { 
    constructor(props){ 
    super(props); 


    } 
    onPositive(){ 
    this.props.navigator.pop() 

    }; 


    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.title}> 
        HYGEX 
       </Text> 
       <View> 
        <TextInput 
         placeholder="Username" 
         style={styles.formInput} 
         /> 
        <TextInput 
         placeholder="Password" 
         secureTextEntry={true} 
         style={styles.formInput1} 
         /> 

       <TouchableHighlight style={styles.button} 
       onPress={() => this.onPositive() }> 
       <Text style={styles.buttonText}>Login</Text> 
       </TouchableHighlight> 
       </View> 
      </View> 
     ); 
    } 
    onPress() { 
    this.props.navigator.push({ 
    title: "HygexListView", 
    component: HygexListView, 
    }); 

} 
} 

とプレス私は、この画面を開く必要があり

HygexListView.js

'use strict'; 
import React, { Component } from 'react'; 
import { AppRegistry, ListView, Text, View } from 'react-native'; 

class HygexListView extends Component { 

    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([ 
     'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' 
     ]) 
    }; 
    } 
    render() { 
    return (
     <View style={{flex: 1, paddingTop: 22}}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 
module.exports = HygexListView; 

Answer 1

私が見たものから、私はあなたが/セットアップナビゲーターコンポーネントを使用するのを忘れだと思い。それをこのように整理してみます：

あなたのコンポーネント

class HygexListView extends Component { 

     constructor(props) { 
     super(props); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
      dataSource: ds.cloneWithRows([ 
      'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' 
      ]) 
     }; 
     } 
     render() { 
     return (
      <Navigator 
       renderScene={this.renderScene.bind(this)} 
       navigator={this.props.navigator} 
       navigationBar={ 
       <Navigator.NavigationBar style={{backgroundColor: 'red', alignItems: 'center'}} 
        routeMapper={NavigationBarRouteMapper} /> 
       } /> 
     ); 
     } 

     renderScene(route, navigator) { 
     return (
      <View style={{flex: 1, paddingTop: 22}}> 
      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={(rowData) => <Text>{rowData}</Text>} 
      /> 
      </View> 
     ); 
     } 
    } 

    module.exports = HygexListView; 

index.ios.js

class yourApp extends Component { 
     render() { 
     return (
      <Navigator 
       initialRoute={{id: 'Login'}} 
       renderScene={this.renderScene.bind(this)} 
       configureScene={(route) => { 
       if (route.sceneConfig) { 
        return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.PushFromRight; 
       }} /> 
     ); 
     } 
     renderScene(route, navigator) { 
     switch (route.id) { 
      case 'HygexListView': 
      return (
       <HygexListView navigator={navigator} /> 
      ); 
      case 'Login': 
      return (
       <Login navigator={navigator} /> 
      ); 
      default: 
      return null; 
     } 
     } 
    } 

基本的に、あなたは何をすべきか、代わりにあなたのコンポーネントをレンダリングするのは、あなたのレンダリングナビゲータでrenderScene（）を使用すると、コンポーネント/ビューがレンダリングされます。

インデックスのファイルをビューのオーガナイザとして使用するアプローチは、私の好みに過ぎません。 「id」がナビゲータに渡されると、シーンはスイッチケースのIDと一致するコンポーネントを使用してレンダリングされることがわかります。