Question

假设我有一个简单的React Native应用程序，如下所示：

SimpleDateFormat

如何在按下'use strict'; var React = require('react-native'); var { AppRegistry, Text, TouchableHighlight, View, } = React; var ReactProject = React.createClass({ _onPressOut: function() { // What do we do here? }, render() { return ( <View> <Text>This text should be before</Text> <Text>This text should be after</Text> <TouchableHighlight onPressOut={this._onPressOut}> <Text>Tap Me</Text> </TouchableHighlight> </View> ); } }); AppRegistry.registerComponent('ReactProject', () => ReactProject);时在第一个和第二个Text代码之间动态插入组件？

Answer 1

尝试创建一个数组并将其附加到状态。然后，您可以将项目推送到阵列，并重置状态。

https://rnplay.org/apps/ymjNxQ

我已经设置了一个工作示例here。

Answer 2

在反应或反应中，组件隐藏/显示或添加/删除的方式不像Android或iOS那样有效。我们大多数人都认为会有像

这样的类似策略

View.hide = true或parentView.addSubView（childView

但是反应原生作品的方式完全不同。实现此类功能的唯一方法是将您的组件包含在DOM中或从DOM中删除。

在此示例中，我将根据按钮单击设置文本视图的可见性。

在此输入图片说明

这个任务背后的想法是创建一个名为state的状态变量，当按钮点击事件发生时，初始值设置为false，然后它值切换。现在我们将在创建组件期间使用此状态变量。

import renderIf from './renderIf'

class fetchsample extends Component {
  constructor(){
    super();
    this.state ={
      status:false
    }
  }
  toggleStatus(){

  this.setState({
    status:!this.state.status
  });
  console.log('toggle button handler: '+ this.state.status);
  }

  render() {
    return (
      <View style={styles.container}>
       {renderIf(this.state.status)(
         <Text style={styles.welcome}>
         I am dynamic text View
         </Text>
       )}

        <TouchableHighlight onPress={()=>this.toggleStatus()}>
          <Text> touchme </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

在这个片段中唯一要注意的是renderIf，它实际上是一个函数，它将根据传递给它的布尔值返回传递给它的组件。

<强> renderIf（谓词）（元素）。

renderif.js

'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

Answer 3

使用React组件，您不希望考虑进入DOM并插入组件的操作 - 您希望认为组件响应操作。从理论上讲，这个组件已经组成并准备就绪，它只需要知道它是否应该被渲染：

var ReactProject = React.createClass({
  getInitialState() {
    // our *state* dictates what the component renders
    return {
      show: false
    };
  }
  _onPressOut: function() {
    // update our state to indicate our "maybe" element show be shown
    this.setState({show: !this.state.show});
  },
  maybeRenderElement() {
    if (this.state.show) {
      // depending on our state, our conditional component may be part of the tree
      return (
        <Text>Yay!</Text>
      );
    }
    return null;
  }
  render() {
    return (
      <View>
        <Text>This text should be before</Text>
        {this.maybeRenderElement()}
        <Text>This text should be after</Text>
        <TouchableHighlight onPressOut={this._onPressOut}>
          <Text>Tap Me</Text>
        </TouchableHighlight>
      </View>
    );
  }
});

我还做了一个帮助，可以很容易地有条件地渲染事物，render-if

renderIf(this.state.show)(
  <Text>Yay</Text>
)

Answer 4

ECMA6语法

import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,    
TextInput,
TouchableOpacity,
TouchableHighlight
} from 'react-native';    

export default class fourD extends Component {

  constructor(props) {
    super(props);
    let ele1 = (
      <View key={1}>
        <Text>Element {1}</Text>
        <TouchableOpacity onPress={ () => this._add()  }>
         <Text>Add</Text>
        </TouchableOpacity>
      </View>
     );

    this.state = {
      ele: [],
      key: 1
    }

    this.state.ele.push(ele1);

   }

  _add(){

    let key = this.state.key + 1;

    let ele2 = (
      <View key={key}>
        <Text>Element {key}</Text>
        <TouchableOpacity onPress={ () => this._add()  }>
         <Text>Add</Text>
        </TouchableOpacity>
      </View>
    );

    let ele = this.state.ele;
    ele.push(ele2);
    this.setState({ ele: ele,key : key})

  }
  render() {

    return (
      <View style={styles.container}>
       <Text>This text should be before</Text>
        { this.state.ele }
       <Text>This text should be after</Text>
       <TouchableHighlight onPressOut={ () => this._add()  }>
          <Text>Tap Me</Text>
        </TouchableHighlight>
      </View>
    )
  }
}



const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "white",
    }
})

以编程方式在React Native中添加组件

4 个答案: