Question

_render() {
    return (
        <Group>
            <Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />
            <Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />
        </Group>
    );
}

在这里，我想让形状标记变得可变。像这样

let shapes = [<Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />,
            <Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />]

function _render() {
    return (
        <Group>
            {shapes}
        </Group>
    );
}

有时我想要更改形状并再次渲染。我该怎么办？

Answer 1

再次触发渲染的最简单方法是setState。

'use strict';
import React, { Component, View, Text, StyleSheet, TouchableHighlight, ART, TouchableOpacity } from 'react-native';
let { Shape, Group, Surface} = ART;
export default class Hello extends Component {
  constructor() {
    super();
    this.state = {
      shapes: null
    };
    this.onPress = this.onPress.bind(this);
  }
  onPress() {
    this.setState({
      shapes: [<Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />,
        <Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke="#000000" strokeWidth={3} />]
    });
  }
  render() {
    return (<View style={styles.container}>
                 <Surface width={200} height={200}>
                   <Group>
                     {this.state.shapes}
                  </Group>
                  </Surface>
                  <TouchableOpacity onPress={this.onPress}>
                      <Text>
                       Click Me
                      </Text>
                  </TouchableOpacity>
                </View>);
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  content: {
    margin: 10
  }
});

react-native如何呈现可变视图？

1 个答案: