如何更新反应本地标签视图组件的一个孩子没有更新全成分反应本土?

时间:2019-02-02 07:20:17

标签: javascript react-native react-native-tab-view

我想更新数据为标签视图的孩子走出重新渲染整个标签视图中的一个反应天然

现在,当我更新数据时,我必须重新呈现整个选项卡视图组件。

state = {
  Downloading: false,
  RealSlider: 1,
  svalue: 1,
  appState: AppState.currentState,
  selectedValue: 0,
  SelectedAuthorArrayIndex: 0,
  Authors: [],
  index: 0,
  routes: [],
  loading: true,
  innerLoading: true,
  M1TurnMeOn: false,
  M2TurnMeOn: false,
  Playing: false,
  AudioPicked: false,
  currentTime: "00:00",
  currentAudioDuration: 0,
  currentAudioName: "",
  currentAudioAuthor: "",
  currentAudioID: "0",
  currentAudioURL: "",
  currentAudiono: "0",
  currentIntro: "",
  currentAudioDownload: 0
};

_renderTabBar = props => {
return (
  <TabBar
    {...props}
    scrollEnabled
    indicatorStyle={styles.indicator}
    style={styles.tabbar}
    labelStyle={styles.label}
    tabStyle={{ paddingVertical: "2.5%" }}
  />
);};

_keyExtractor = (item, index) => "GRID" + index;

_renderTabScreen = ({ route }) => {
return (
  <View style={[styles.page, { backgroundColor: "#673ab7" }]}>
    <FlatList
      keyExtractor={this._keyExtractor}
      data={route.DATA}
      renderItem={this._renderFlatlistItem}
      style={StyleA.list}
    />
  </View>
  );
 };

_renderFlatlistItem = ({ item, index }) => {
return (
  <View style={StyleA.AudioItem} key={index}>
    <View style={StyleA.AudioView}>
      <TouchableWithoutFeedback
        onPress={() => this.DoItForclickOnBoardItem(item)}
      >
        <View style={StyleA.AudioViewLeft}>
          <ICON1 name="play" color="#68D0FE" size={50} />

        </View>
      </TouchableWithoutFeedback>
      <View style={StyleA.AudioViewRight}>
        <View style={StyleA.AudioViewRightLeft}>
          <Text style={StyleA.AudioNameText}>{item.name}</Text>
          <Text style={StyleA.AudioAuthorNameText}>
            {
              this.state.Authors[this.state.SelectedAuthorArrayIndex]
                .authorname
            }
          </Text>
        </View>
        <View style={StyleA.AudioViewRightRight}>
          {item.isdownloaded != 2 && (
            <TouchableOpacity
              onPress={() =>
                this.DownloadfromTheList(
                  item.content_id,
                  item.content_no,
                  item.name,
                  this.type,
                  item.URL
                )
              }
            >
              <Image
                source={downloadIcon}
                style={StyleA.downloadIcon2}
                resizeMode={"stretch"}
              />
            </TouchableOpacity>
          )}
        </View>
      </View>
    </View>
  </View>
);
};

render(){
     .
     .
     .
{!this.state.AgainLoading && (
          <TabView
            style={styles.TabView}
            onIndexChange={index => this.setState({ index })}
            navigationState={this.state}
            initialLayout={initialLayout}
            renderScene={this.__renderTabScreen}
            renderTabBar={this._renderTabBar}
            canJumpToTab={() => {
              return true;
            }}
          />
)}
    .
    .
    .
    }

我的代码按预期方式运行,但是我想要一种方法来更新一个Tab View屏幕的Flatlist项目,而无需重新呈现整个Tab View组件。

0 个答案:

没有答案