如何在本机反应中启动另一个组件答案

【问题标题】：How to start another component in react native如何在本机反应中启动另一个组件
【发布时间】：2017-01-24 14:52:59
【问题描述】：

我正在学习react-native 编程，我在index.android.js 中有一个组件。我在那个组件中有一个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 中设置点击侦听器以及如何在点击它时启动下一个组件。

提前致谢。

【问题讨论】：

启动下一个组件是什么意思？你的意思是喜欢隐藏和显示组件吗？
这与 react native 无关。这是基本的 OOP。

标签： android react-native react-native-android

【解决方案1】：

这样试试

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

参考这个link

【讨论】：

【解决方案2】：

touchable opacity 的全部意义在于触摸它。

将您的 Business Logic 放在单独的 class 中，并从 Touchable opacity 事件中调用它。然后在你想要的任何地方使用你的代码中的逻辑！

【讨论】：

我现在在点击touchable opacity 时创建了另一个文件 second.android.js 我想打开 second.android.js 如何在 onPress 中写入内容
@Williams 抱歉，我很难理解您的意思。你能再解释一下吗？

【解决方案3】：

您可以根据状态/道具在单个组件中进行条件渲染，所以可能是这样的：

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

，但如果您正在寻找更强大的功能，请阅读 react-native-router-flux

【讨论】：

这是一个可怕的解决方案。只需创建一个单独的函数并从您想要的onPress 调用它......
就像我说的，这不是一个可靠的解决方案。他第一次使用 react-native，并且只有一个组件。如果是我在玩，我会这样做。如果你想构建一个企业级的解决方案，那么我会使用上面提到的路由器，redux reducers+actions，整个 9 码......