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（）渲染你的组件/视图。

使用索引文件作为视图组织者的方法，只是我的偏好。但你会看到那里，当一个＆＃34; id＆＃34;传递给导航器，场景将使用与开关盒上的id匹配的组件进行渲染。

按下原生的TouchableHighlight按下打开另一个屏幕

1 个答案: