在 React Native 中使用样式组件捕获 Pressable press

Question

有没有办法将pressed属性传递给样式组件？

我现在拥有的：

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledPressable = styled(Pressable)``;

const App = () => {
  return (
    <View>
      <StyledPressable
        onPress={() => null}
        android_ripple={{ color: 'black', borderless: true }}>
        <Text>Log in</Text>
      </StyledPressable>
    </View>
  );
};

export default App;

我想要实现什么

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledPressable = styled(Pressable)`
  background-color: ${props => pressed ? 'black' : 'blue'}    // change color on press, eg.
`;

const App = () => {
  return (
    <View>
      <StyledPressable
        onPress={() => null}
        android_ripple={{ color: 'black', borderless: true }}>
        pressed={pressed}    // this property "pressed" does not exist.
        <Text>Log in</Text>
      </StyledPressable>
    </View>
  );
};

export default App;

这是官方文档。它使用内联样式，我无法使用样式组件来完成此操作。

Answer 1

我认为目前没有办法。解决方法是使用ViewBetweenPressable和Text并在其中完成所有样式设置：

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledView = styled.View`
   background-color: ${({pressed}) => pressed ? 'black' : 'blue'}    
`;

const App = () => {
    return (
        <View>
           <Pressable onPress={() => null}>
             {({pressed}) => (
               <StyledView pressed={pressed}>
                 <Text>Log in</Text>
               </StyledView>
             )}
           </Pressable>
        </View>
    );
};

export default App;