반응 네이티브에서 다른 구성 요소를 시작하는 방법

Question

index.android.js에 하나의 구성 요소가있는 react-native 프로그래밍을 배우고 있습니다. 해당 구성 요소에 TouchableOpacity이 있습니다. TouchableOpacity을 클릭하면 다음 구성 요소를 시작하고 싶습니다.

<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={}> 
    <Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text> 
</TouchableOpacity> 

는 사람이 어떻게 onPress 방법이 클릭에 다음 구성 요소를 시작하는 청취자를 클릭하여 설정할 수 있습니다 제안 할 수 있습니다.

미리 감사드립니다.

Answer 1

이 link

를 참조이

'use strict'; 

var React = require('react-native'); 

var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableOpacity, 
} = React; 

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, { 
    snapVelocity: 8, 
}); 

var CustomSceneConfig = Object.assign({}, BaseConfig, { 

    springTension: 100, 
    springFriction: 1, 
    gestures: { 
    pop: CustomLeftToRightGesture, 
    } 
}); 

var PageOne = React.createClass({ 
    _handlePress() { 
    this.props.navigator.push({id: 2,}); 
    }, 
    render() { 
    return (
     <View style={[styles.container, {backgroundColor: 'green'}]}> 
     <Text style={styles.welcome}>Greetings!</Text> 
     <TouchableOpacity onPress={this._handlePress}> 
      <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}> 
      <Text style={styles.welcome}>Go to page two</Text> 
      </View> 
     </TouchableOpacity> 
     </View> 
    ) 
    }, 
}); 

var PageTwo = React.createClass({ 
    _handlePress() { 
    this.props.navigator.pop(); 
    }, 

    render() { 
    return (
     <View style={[styles.container, {backgroundColor: 'purple'}]}> 
     <Text style={styles.welcome}>This is page two!</Text> 
     <TouchableOpacity onPress={this._handlePress}> 
      <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}> 
      <Text style={styles.welcome}>Go back</Text> 
      </View> 
     </TouchableOpacity> 
     </View> 
    ) 
    }, 
}); 

var SampleApp = React.createClass({ 
    _renderScene(route, navigator) { 
    if (route.id === 1) { 
     return <PageOne navigator={navigator} /> 
    } else if (route.id === 2) { 
     return <PageTwo navigator={navigator} /> 
    } 
    }, 

    _configureScene(route) { 
    return CustomSceneConfig; 
    }, 

    render() { 
    return (
     <Navigator 
     initialRoute={{id: 1, }} 
     renderScene={this._renderScene} 
     configureScene={this._configureScene} /> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    color: 'white', 
    }, 
}); 
AppRegistry.registerComponent('SampleApp',() => SampleApp); 
module.exports = SampleApp; 

같은 시도

Answer 2

당신은, 주/소품에 따라 단일 구성 요소에서이 같은 아마 뭔가 조건부 렌더링을 수행 할 수 있습니다

render() { 
    return state.displayComponent? 
    <NewComponent /> : 
    <TouchableOpacity ... onPress={() => this.setState({displayComponent: true})} /> 
} 

을,하지만 당신은 더 강력한 무언가를 찾고 있다면, react-native-router-flux

에 읽어

Answer 3

전체 포인트는 touchable opacity입니다.

Business Logic을 별도의 class에 넣고 Touchable opacity 이벤트에서 호출합니다. 그런 다음 원하는 곳에서 코드의 논리를 사용하십시오!