React Native 组件只渲染一次

Question

我正在使用这两个库从 'react-native-swipe-cards' 导入 SwipeCards；和从 'react-native-auto-typing-text';

导入 AutoTypingText

在我的每张卡片中我都使用 AutoTypingText，问题是它在所有卡片中使用相同的文本，唯一改变的是 this.props.Nickname

这不是 AutoTypingText

的文本属性的一部分

子卡组件：

render() {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.titleText}>{this.props.Nickname}</Text>
            <AutoTypingText
                text={"\nAge: " + this.props.Age + "\n"
                    + "City: " + this.props.City + "\n"
                    + "Recent Login: " + this.props.RecentActivity + "\n"
                    + "Points: " + this.props.Points + "\n"
                    + "About: \"" + this.props.About + "\"\n"
                }
                charMovingTime={0}
                style={textStyle}
                delay={0}
                onComplete={() => {
                    console.log('done');
                    console.log(this.state)
                }}
            />

            <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Exploit !
                </Button>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Spare
                </Button>
            </View>
        </View>
    );
    }
}

家长名片列表

const Cards = [
{
    Nickname: "S4nr0",
    Age: 25,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I <3 Kittenz",
    Points: 1337
},
{
    Nickname: "Sr00lik",
    Age: 23,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "If Internet explorer is brave\nenough to ask you to be your\n default browser, you're brave \nenough to ask that girl out",
    Points: 1337
},
{
    Nickname: "Bomba",
    Age: 24,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I'm Awesome !",
    Points: 1337
}
];

export default React.createClass({
    getInitialState() {
    return {
      cards: Cards
    }
  },
render() {
    return (
      <SwipeCards
        cards={this.state.cards}
        renderCard={(cardData) => <Card {...cardData} />}
      />
    )
    }
})

澄清一下：就好像 AutoTypingText 就像一个单例（我知道它不是），因为它的结果在所有卡片中都是一样的

Answer 1

这不是正确的答案，但在本机反应中，通常有助于为重复的元素提供关键属性，以确保 "virtual DOM" 检测到更改。

所以你可以这样做：

<AutoTypingText
            key={this.props. Nickname}
            text={"\nAge: " + this.props.Age + "\n"
                + "City: " + this.props.City + "\n"
                + "Recent Login: " + this.props.RecentActivity + "\n"
                + "Points: " + this.props.Points + "\n"
                + "About: \"" + this.props.About + "\"\n"
            }
            ...

试一试； )

React Native 组件只渲染一次

React Native a component being only rendered once

reactjs

react-native

react-native-component