如何react-native呈現可變視圖？

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