オープンは、私は、この画面を持って反応し、ネイティブ

Question

内の別の画面が

ネイティブ

import React, { Component } from 'react'; 
    import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native'; 


    class LoginView extends Component { 

     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.move()}> 
        <Text style={styles.buttonText}>Login</Text> 
        </TouchableHighlight> 

        </View> 
       </View> 
      ); 
     } 

     move() { 
     //what i can do here to go to Socrce screen ??? 
     } 
     } 

を反応させ、ログイン画面のようなもの、私は TouchableHighlight にクリックしたときに、今私は、この画面を開く必要があり

'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; 

I moveメソッドを実装しようとしましたが、失敗しました！どんな考え？

react-nativeには、TouchableHighlightにクリックすると画面を変更する方法がありますか？

Answer 1

あなたがおおよそのバックボタンで画面に関連するすべてのものを管理するコンポーネント、およびヘッダーバーでナビゲーターを実装しており、など

あなたが初心者であるため、私はあなたが見てすることをお勧めこのリンク上のドキュメント：短い答えのための

https://facebook.github.io/react-native/docs/navigator.html

申し訳ありませんが、私は自分の携帯電話上です。

幸運を祈る！

Answer 2

ナビゲータを使用する必要があります。下記の説明書をお読みください。もしあなたが必要なら私はあなたに私のコードを共有します。ここで

は一例です：NavigatorExample

Answer 3

他の人が指摘したように、あなたは画面間の移行をNavigatorのインスタンスを使用する必要があります。おそらく、React Nativeレポのexample appsを見ることができます。 this router packageはセットアップが簡単で、出発点として使用できるサンプルアプリケーションも含まれています。

編集 反応し、ネイティブ・ルータ・フラックスを使用した簡単な例として、あなたはこのように見てExampleディレクトリ内Example.jsファイルを編集することができます：あなたのコンポーネントのmove機能では、次に

import React, { 
    Component, 
} from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 
import LoginView from './LoginView'; 
import HygexListView from './HygexListView'; 
import { 
    Scene, 
    Router, 
    Actions, 
} from 'react-native-router-flux'; 

const styles = StyleSheet.create({ 
    container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    tabBarStyle: { 
    backgroundColor: '#eee', 
    }, 
    tabBarSelectedItemStyle: { 
    backgroundColor: '#ddd', 
    }, 
}); 


// define this based on the styles/dimensions you use 
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => { 
    const style = { 
    flex: 1, 
    backgroundColor: '#fff', 
    shadowColor: null, 
    shadowOffset: null, 
    shadowOpacity: null, 
    shadowRadius: null, 
    }; 
    if (computedProps.isActive) { 
    style.marginTop = computedProps.hideNavBar ? 0 : 64; 
    style.marginBottom = computedProps.hideTabBar ? 0 : 50; 
    } 
    return style; 
}; 

class Example extends Component { 
    render() { 
    return (
     <Router getSceneStyle={getSceneStyle}> 
     <Scene key="login" component={LoginView} initial={true}/> 
     <Scene key="hygex" component={HygexListView } /> 
     </Router> 
    ); 
    } 
} 

export default Example; 

を次の操作を実行する必要があります。

move(){ 
    Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that. 

私は、コードをテストしていませんので、いくつかの誤字/行方不明の輸入/コードがあるかもしれないが、それはSHO uldは、あなたがしなければならないことのアイデアを与えます。 }