【问题标题】:React Native - Pressable - Can't run sample codeReact Native - Pressable - 无法运行示例代码
【发布时间】:2020-08-13 21:25:26
【问题描述】:

我正在尝试从 react native 运行示例代码,您可以在此处找到:https://reactnative.dev/docs/pressable

我总是收到错误消息:警告:React.createElement: type is invalid -- 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到: %s.%s%s,未定义,您可能忘记从定义的文件中导出组件 ,或者您可能混淆了默认和命名导入。

谁能告诉我这里有什么问题?

示例代码:

import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

const App = () => {
  const [timesPressed, setTimesPressed] = useState(0);

  let textLog = '';
  if (timesPressed > 1) {
    textLog = timesPressed + 'x onPress';
  } else if (timesPressed > 0) {
    textLog = 'onPress';
  }

  return (
    <View>
      <Pressable
        onPress={() => {
          setTimesPressed((current) => current + 1);
        }}
        style={({ pressed }) => [
          {
            backgroundColor: pressed
              ? 'rgb(210, 230, 255)'
              : 'white'
          },
          styles.wrapperCustom
        ]}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Press Me'}
          </Text>
        )}
      </Pressable>
      <View style={styles.logBox}>
        <Text testID="pressable_press_console">{textLog}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16
  },
  wrapperCustom: {
    borderRadius: 8,
    padding: 6
  },
  logBox: {
    padding: 20,
    margin: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9'
  }
});

export default App;

【问题讨论】:

  • 你在用expo吗?
  • 是的,我正在使用博览会

标签: javascript reactjs react-native


【解决方案1】:

Pressable 在 Expo 中尚不可用,因为 expo 不支持 React Native v0.63(尚)。

【讨论】:

  • 嗯嗯好的。还有什么选择?或者我应该如何设置一个新项目
  • 尝试使用TouchableOpacity
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-07-12
  • 2017-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-02
相关资源
最近更新 更多