React Native - компонент, отображаемый только один раз

Question

Я использую обе библиотеки для импорта SwipeCards из "response-native-swipe-cards"; и импортировать AutoTypingText из'act-native-auto-typing-text';

В каждой моей карточке я использую 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

Это не правильный ответ, но он реагирует на нативность, обычно помогает обеспечить ключевой атрибут для повторяющихся элементов, чтобы убедиться, что "виртуальный 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"
            }
            ...

Дайте ему попытку;)