React原生TouchableHighlight新闻打开另一个屏幕

Question

iam new in react native并开始我的第一个项目，我有一个登录屏幕，当我按入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, 
    }); 

} 
} 

，当记者走进TouchableHighlight我需要打开这个屏幕

个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相匹配的组件呈现。