打開的反應母語

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; 

我試圖實施移動方法，但我失敗了！任何想法爲什麼？

反應是否母語必須改變屏幕時，點擊進入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很容易設置，它還包括一個示例應用程序，您可以使用它作爲一個起點。然後

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功能：

編輯 作爲使用反應本地路由器通量一個簡單的例子，你可以編輯Example.js文件中的Example目錄看起來像這樣，你必須做到以下幾點：

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

我還沒有測試代碼，所以可能有一些錯別字/缺少進口/代碼，但它笑你可以告訴你你必須做什麼。 }