So starten Sie eine andere Komponente in reagieren native

Question

Ich lerne react-native Programmierung, wo ich eine Komponente in index.android.js habe. Ich habe eine TouchableOpacity in dieser Komponente. Ich möchte nächste Komponente auf klicken Sie auf TouchableOpacity.

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

Kann jemand empfehlen, dass Wie kann ich Listener klicken in onPress und wie auf einen Klick auf das nächste Komponente zu starten.

Vielen Dank im Voraus.

Answer 1

Versuchen Sie, wie dieses

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

diese verweisen link

Answer 2

Sie können in einem einzigen Bauteil bedingten Rendering tun, je nach Zustand/Requisiten, vielleicht so etwas wie dieses:

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

, aber wenn Sie nach etwas robuster, lesen Sie auf react-native-router-flux suchen

Answer 3

Der ganze Punkt von touchable opacity ist es zu berühren.

Setzen Sie Ihre Business Logic in eine separate class und rufen Sie sie aus dem Touchable Opazität Ereignis. Dann benutze diese Logik in deinem Code wo immer du willst!