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

Question

假设我有一个像这样的简单 React Native 应用程序：

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

当按下 TouchableHighlight --- 时，如何在第一个和第二个 Text 标签之间动态插入组件？

原文由 Axeva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

https://rnplay.org/apps/ymjNxQ

 'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var index = 0

var SampleApp = React.createClass({

  getInitialState(){
    return { myArr: [] }
  },

  _onPressOut() {
    let temp = index ++
    this.state.myArr.push(temp)
    this.setState({
        myArr: this.state.myArr
    })
  },

  render() {

    let Arr = this.state.myArr.map((a, i) => {
      return <View key={i} style={{ height:40, borderBottomWidth:2, borderBottomColor: '#ededed' }}><Text>{ a }</Text></View>
    })
    return (
      <View style={styles.container}>
        <Text>First</Text>
        { Arr }
        <Text>Second</Text>
        <TouchableHighlight style={ styles.button } onPress={ () => this._onPressOut() }>
            <Text>Push</Text>
        </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  button: {
    height:60,
    backgroundColor: '#ededed',
    marginTop:10,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

我在 这里 设置了一个工作示例。

原文由 Nader Dabit 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 React 或 React Native 中，组件隐藏/显示或添加/删除的方式不像在 Android 或 iOS 中那样工作。我们大多数人认为会有类似的策略

View.hide = true 或 parentView.addSubView(childView

但是 React Native 工作的方式是完全不同的。实现这种功能的唯一方法是将组件包含在 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（谓词）（元素）。

渲染器.js

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

原文由 Rajan Twanabashu 发布，翻译遵循 CC BY-SA 3.0 许可协议