反应原生样式组件条件道具答案

【问题标题】：React native styled component conditional Props反应原生样式组件条件道具
【发布时间】：2021-10-27 02:38:29
【问题描述】：

我正在为我的应用程序使用 React-native 打字稿。我正在尝试制作一个自定义设置屏幕。自定义设置采用数据道具；描述设置内容的对象。在设置屏幕中，很少有项目是可点击的，它导航到其他屏幕或执行一些操作，而其他项目是不可点击的。我想让样式化的组件有条件地渲染。如果我对数据使用onPress 道具，那么它将是可点击的（可触摸的不透明度）或不可点击的（查看）。

目前我正在使用 React native 的 StyleSheet 并在 ContentContainer 元素中传递 onPress。如果在数据道具中存在onPress，那么它将是TouchableOpacity，如果不存在则View。它工作正常且符合预期。出于学习目的，我想在 Styled-components 中创建此条件。但我不知道该怎么做。

这是代码

import * as React from 'react';
import {StyleSheet, View, TouchableOpacity, TextStyle} from 'react-native';
import styled from 'styled-components/native';

import {Icon} from './Chevron';

export interface RowData {
  onPress?: () => void;
  showDisclosureIndicator: boolean;
}

export const Row = ({
  onPress,
  showDisclosureIndicator
}: RowData) => {
  let ContentContainer = onPress ? TouchableOpacity : View; // This condtion I made
  return (
    <Container>
      <ContentContainer style={styles.contentContainer} onPress={onPress}> // In here i pass the onPress
        {showDisclosureIndicator ? <Icon /> : <View />}
      </ContentContainer>
    </Container>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    flexDirection: 'row',
    paddingLeft: 15,
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },
});


const ContentContainer = styled.TouchableOpacity` // I was trying to use Styled compoent. Don't know how
  flex: 1;
  flex-direction: row;
  padding-left: 15px;
  align-items: center;
  background-color: white;
`;

【问题讨论】：

标签： typescript react-native styled-components

【解决方案1】：

我找到了更好的解决方案。如果没有任何onPress，则添加禁用

<ContentContainer onPress={onPress} disabled={!onPress}> // like this

【讨论】：

【解决方案2】：

不确定为什么要将 TouchableOpacity 更改为 View。关闭不透明度并处理 onPress 处理程序中的逻辑会更有意义。你也可以使用 TouchableOpacity 的 disable 道具。 <ContentContainer disabled={!onPress}>

或者您可以使用 Pressable，它在印刷时不会透明，因此在视觉上与 View 相同。（一个应用程序是 React Native 的标志是当你点击它们时所有可按压的东西都变得透明）

据我所知，我认为您无法使用样式化组件更改视图类型。你完全可以通过 props 来改变样式。

import { TextStyle } from 'react-native';
import styled from 'styled-components/native';

import { Icon } from './Chevron';

export interface RowData {
  onPress?: () => void;
  showDisclosureIndicator: boolean;
}

export const Row = ({
  onPress,
  showDisclosureIndicator
}: RowData) => {

  const handlePress = () => {
    if (onPress) () => {
      // Do what you need to do on press
    }
    else {
      // Do nothing    
    }
  }

  return (
    <Container>
      <ContentContainer
        isPressable={onPress}
        disabled={!onPress}
        onPress={handlePress}
      >
        {showDisclosureIndicator ? <Icon /> : <View />}
      </ContentContainer>
    </Container>
  );
};

// lets, as an example, change background when onPress is true
const ContentContainer = styled.Pressable`
  flex: 1;
  flex-direction: row;
  padding-left: 15px;
  align-items: center;
  background-color: ${({ isPressable }) => isPressable ? white : green};
`;

【讨论】：