React Native 应用程序 - NativeBase DeckSwiper 在数据源更改时不会立即重新渲染

Lau*_*nny 5 react-native native-base

我正在使用 NativeBase 中的 Picker 和 DeckSwiper，当我从 Picker 菜单中选择不同的主题时，它会更新 DeckSwiper 组件上的 dataSource 读取的状态，该状态应该重新渲染以显示新内容。目前仅在刷第一张卡时才会重新渲染。状态改变后如何重新渲染？这是一个 GIF，展示了它当前的工作原理。

这是代码

const Item = Picker.Item;

const topics = [
  { label: "topic 1", value: "1" },
  { label: "topic 2", value: "2" },
  { label: "topic 3", value: "3" }
];

const cards = [
  { text: "Card A", topicId: "1", name: "One" },
  { text: "Card B", topicId: "2", name: "Two" },
  { text: "Card C", topicId: "3", name: "Three" },
  { text: "Card D", topicId: "1", name: "Four" },
  { text: "Card E", topicId: "2", name: "Five" },
  { text: "Card F", topicId: "3", name: "Six" }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "1",
      topics: topics,
      cards: cards
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value,
      cards: cards.filter(item => item.topicId === value)
    });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              {this.state.topics.map((topic, i) => {
                return <Item label={topic.label} value={topic.value} key={i} />;
              })}
            </Picker>
          </Form>
          <View>
            <DeckSwiper
              ref={c => (this._deckSwiper = c)}
              dataSource={this.state.cards}
              renderItem={item => (
                <Card style={{ elevation: 3 }}>
                  <CardItem>
                    <Left>
                      <Body>
                        <Text>{item.text}</Text>
                        <Text>Topic{item.topicId}</Text>
                      </Body>
                    </Left>
                  </CardItem>
                  <CardItem cardBody>
                    <Image
                      style={{ height: 300, flex: 1 }}
                      source={{
                        uri:
                          "http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"
                      }}
                    />
                  </CardItem>
                </Card>
              )}
            />
          </View>
        </Content>
        <View style={{ flexDirection: "row", flex: 1, position: "absolute", bottom: 50, left: 0, right: 0, justifyContent: 'space-between', padding: 15 }}>
        <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}>
          <Text>Swipe Left</Text>
        </Button>
        <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
          <Text>Swipe Right</Text>
        </Button>
      </View>
      </Container>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，10 月前
查看次数：	786 次
最近记录：	7 年，10 月前