Как передать реквизиты навигации в "createStackNavigator", чтобы использовать заголовок по умолчанию с анимацией - PullRequest
Новая
       28

Как передать реквизиты навигации в "createStackNavigator", чтобы использовать заголовок по умолчанию с анимацией

1 голос
/ 22 марта 2019

Последние несколько дней я работал над добавлением анимированного заголовка на мои экраны.Я преуспел в этом, однако теперь я хотел бы применить это в качестве заголовка по умолчанию, а не копировать и вставлять код на все экраны, которые я хочу использовать.На данный момент анимированный заголовок реализован на экране следующим образом:

Чтобы отобразить заголовок: 

static navigationOptions = ({ navigation }) => {
    return {
        header: () => {
            return (
                <SafeAreaView style={{
                    height: 0,
                    overflow: 'visible',
                }}>
                    <Animated.View style={{height: 80, width: 80,
                        transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                    }}>
                        <TouchableOpacity style={{padding: 20}} onPress={() => navigation.goBack()}>
                            <Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} />
                        </TouchableOpacity>
                    </Animated.View>
                </SafeAreaView>
            )
        }
    }
};

Чтобы настроить состояние: 

constructor() {
    super();
    this.state = {
        headerScrollY: new Animated.Value(0),
    };
}

Чтобы установитьинтерполяция анимации и передача значения навигационным реквизитам (к этому я собираюсь обратиться позже при визуализации заголовка) 

componentWillMount() {
    this.props.navigation.setParams({
        headerScrollY: this.state.headerScrollY.interpolate({
            inputRange: [0, 80],
            outputRange: [0, -80],
        })
    });
}

Основной метод рендеринга с scrollView, вызывающий событие onScroll для получениядействие прокрутки 

render() {
    return (
            <ScrollView
                style={Styles.wholePageContainer}
                showsVerticalScrollIndicator={false}
                scrollEventThrottle={16}
                onScroll={Animated.event( [{nativeEvent:{contentOffset: {y: this.state.headerScrollY}}}])}
            >
                ...
            </ScrollView>
        );
    }

Чтобы установить заголовок по умолчанию, я должен установить значение "header" в "defaultNavigationOptions", когда я использую "createStackNavigator".Я могу использовать это для создания простого заголовка по умолчанию красного цвета с высотой 100 (код и изображение ниже): 

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Category: CategoryScreen,
    Venue: VenueScreen,
    Activity: ActivityScreen,
}, {
    headerMode: 'screen',
    defaultNavigationOptions: {
        header: <View style={{backgroundColor: '#ff0000', height: 100}} />
        ,
    },
});

Симулятор, демонстрирующий применение простого заголовка по умолчанию

К сожалению, для моего анимированного заголовка мне требуется реквизит "навигации", поскольку он используется для хранения значений анимации.Я перепробовал множество подходов, чтобы передать это туда, где мне нужны значения, и мне было интересно, знает ли кто-нибудь, как это сделать, или вообще возможно ли это, или у кого-нибудь были какие-либо предложения.

1 Ответ

1 голос
/ 22 марта 2019

Благодаря Хенду эль-Сахли, теперь у меня есть код, чтобы работать так, как задумано.Результат (для будущего использования для других) такой же, как и ранее, однако удаление определений заголовков в опциях навигации для каждого экрана и вызов createStackNavigator выглядит следующим образом: 

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Category: CategoryScreen,
    Venue: VenueScreen,
    Activity: ActivityScreen,
}, {
    headerMode: 'screen',
    defaultNavigationOptions: ({ navigation }) => ({
        header:
            <SafeAreaView style={{
                height: 0,
                overflow: 'visible',
            }}>
                <Animated.View style={{height: 80, width: 80,
                    transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                }}>
                    <TouchableOpacity style={{padding: 20}} onPress={() => navigation.goBack()}>
                        <Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} />
                    </TouchableOpacity>
                </Animated.View>
            </SafeAreaView>
    }),
});
...