Реагировать навигацией общий элемент View не может иметь дочерние элементы? - PullRequest
Новая
       28

Реагировать навигацией общий элемент View не может иметь дочерние элементы?

0 голосов
/ 26 апреля 2020

Возможно ли иметь реакцию анимации общего элемента навигации на элементе View, у которого есть один дочерний элемент View? Что-то вроде этого GIF: у меня есть что-то вроде этого, но это глючит. Могу ли я иметь вложенные общие элементы? Я пытался добавить вложенный общий элемент с его идентификатором, но результат тот же. Даже если я добавлю общий элемент или нет, результат останется прежним.

enter image description here

Первый экран: 

const SharedElements = ({ navigation }) => {
    return (
        <>
            <SharedElement id={`view`}>
                <View style={styles.container}>
                    <TouchableOpacity
                        onPress={() => navigation.push("SecondScreen")}
                    >
                        <View style={styles.innerContainer} />
                    </TouchableOpacity>
                </View>
            </SharedElement>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        width: 150,
        height: 150,
        backgroundColor: "red",
        justifyContent: "center",
        alignItems: "center",
    },
    innerContainer: {
        backgroundColor: "blue",
        width: 50,
        height: 50,
    },
});

Второй экран: 

const SecondScreen = ({ route, navigation }) => {
    return (
        <View style={styles.container}>
            <SharedElement id={`view`}>
                <View style={styles.containerShared}>
                    <View style={styles.innerContainer} />
                </View>
            </SharedElement>
        </View>
    );
};

const styles = {
    containerShared: {
        width: 150,
        height: 250,
        backgroundColor: "red",
        alignSelf: "center",
        justifyContent: "center",
        alignItems: "center",
    } as ViewStyle,
    innerContainer: {
        backgroundColor: "blue",
        width: 50,
        height: 50,
    },
};

Приложение: 

const interpolator = ({ current: { progress } }) => {
    return { cardStyle: { opacity: progress } };
};

export default function App() {
    return (
        <NavigationContainer>
            <Navigator>
                <Screen name="FirstScreen" component={FirstScreen} />
                <Screen
                    name="SecondScreen"
                    component={SecondScreen}
                    options={{
                        cardStyleInterpolator: interpolator,
                    }}
                    sharedElementsConfig={(route, otherRoute, showing) => {
                        return [
                            {
                                id: "view",
                                animation: "move",
                            },
                        ];
                    }}
                />
            </Navigator>
        </NavigationContainer>
    );
}
...