Как передать реквизиты в ListHeaderComponent? - PullRequest
Новая
       10

Как передать реквизиты в ListHeaderComponent?

0 голосов
/ 07 ноября 2019

, поэтому я перехожу на страницу FooItems из моего первого компонента и передаю реквизиты для навигации. 

    showFooItemsPage = () => {
        this.props.navigation.navigate('FooItemsComponent', {
            fooItems: this.props.fooItems});
  };

В моих FooItemsComponents у меня есть Flatlist с функцией renderItems, и это работает. Однако я хочу внести изменения в список элементов «Плоский список», а затем нажать «Сохранить» в заголовке моего компонента «Плоский список».

Основная проблема, с которой я сейчас сталкиваюсь, это отправка реквизита в компонент заголовка моего плоского списка. Реквизиты не определены, и я понятия не имею, как отправить реквизиты из моего FooItemsComponent или когда я перемещаюсь между страницами?

Вот некоторые фрагменты из моего компонента FooItems: 

class Header extends Component {

    constructor(props) {
        super(props);

    }

    async componentDidMount() {
       //call some reducer action 
      }

    save = items => {
        this.props.saveItems(items);
        this.props.navigation.navigate("previousComponent");
    }

    render() {
        const {navigation, loading } = this.props;

        return (
        <View>
            <View style={styles.header}>
                <TouchableOpacity onPress={this.save}>
                    <Text style={styles.saveText}>Save</Text> 
                    </TouchableOpacity>
                </View>
            <View
                style={{
                borderTopWidth: 1,
                borderTopColor: Colors.grey,
                height: 1,
                }}> 
            </View>
        </View>
        );
    }
}

export class FooItemsComponent extends Component {

    constructor(props) {
        super(props);
    }

    async componentDidMount() {
        //some reducer action 
      }

    renderItem = item => {
         if (item.load) {
          return <ActivityIndicator color={Colors.activityColor} size="small" />;
        } else {

          return (
              <View>
                <FooItems
                    {...item}
                    navigation={this.props.navigation}
                    showParticularItems={true}
                />
                </View>
          ); }
      };

    render() {
        const { fooItems, navigation, loading, props} = this.props;
        if (!fooItems) fooItems = [];

        return (
            <View style={styles.container}>
                <FlatList
                keyExtractor={(item, index) => `key-${index}`}
                data={fooItems}
                renderItem={item => this.renderItem(fooItems.item)}
                ItemSeparatorComponent={Separator}
                ListHeaderComponent={Header}
                ListFooterComponent={loading ? LoadingFooter : Separator}
                />
          </View>

        );
    }
}

1 Ответ

3 голосов
/ 07 ноября 2019

Используйте функцию Arrow и оберните заголовок: 

 <FlatList
    keyExtractor={(item, index) => `key-${index}`}
    data={fooItems}
    renderItem={item => this.renderItem(fooItems.item)}
    ItemSeparatorComponent={Separator}
    ListHeaderComponent={() => <Header yourProps={'blabla title'}/> }
    ListFooterComponent={loading ? LoadingFooter : Separator}
   />

и в Header компонентное использование this.props.yourProps

...