Question

我不确定为什么TouchableOpacity在地图中不起作用。这是我的代码：

     <Content>
        <Form>
          <Header>
            <Title>{concernName}</Title>
          </Header>
            { values.map(value => (
              <TouchableOpacity
              key={value.id}
              onPress={() => console.log('pressed')}
              style={styles.touchable}>
              <ListItem>
                <CheckBox />
                  <Text style={styles.bodyTextOptions}>{value.name}</Text>
              </ListItem>
              </TouchableOpacity>
            )) }
        </Form>
      </Content>

为确认TouchableOpacity的位置，我添加了样式：

  touchable: {
    width: '100%',
    backgroundColor: '#e5edf9',
    margin: 10,
    height: 55
  },

这将产生以下结果：

当我单击蓝色区域时，没有任何反应。我没有错误，什么也没发生。有什么想法我做错了吗？

Answer 1

我最终通过消除TouchableOpacity使它起作用。由于某些原因，TouchableOpacity无法与嵌套复选框一起使用。

            { values.map(value => (
              <ListItem key={value.id} onPress={ () => console.log('pressed') }>
                <CheckBox checked={ this.activateCheckBox(item) }/>
                <Body>
                  <Text style={styles.bodyTextOptions}>{value.name}</Text>
                </Body>
              </ListItem>
            )) }

通过以上内容，我可以检查整行，也可以选中复选框。

Answer 2

您错过了onPress={() => console.log('pressed')}中的一对花括号应该是onPress={() => {console.log('pressed')}} 您所做的只是返回一个无意义的值（一个函数），您实际上应该在花括号的帮助下调用该函数。

默认情况下，箭头功能返回箭头右侧的值，并用大括号括起来执行代码。

Answer 3

CheckBox interface extends Touchableopacity props在NativeBase中。

因此，您可以按以下方式在onPress中呼叫Touchableopacity，

<Content>
    <Form>
        <Header>
            <Title>{concernName}</Title>
        </Header>
        {values.map(value => (
            <TouchableOpacity
                key={value.id}
                onPress={() => console.log('pressed')}
                style={styles.touchable}>
                {/* <ListItem>
                <CheckBox />
                  <Text style={styles.bodyTextOptions}>{value.name}</Text>
              </ListItem> */}
            </TouchableOpacity>
        ))}
    </Form>
</Content>

或者您可以将onPress作为道具传递给CheckBox

<Content>
    <Form>
        <Header>
            <Title>{concernName}</Title>
        </Header>
        {values.map(value => (
            <TouchableOpacity
                key={value.id}
                style={styles.touchable}>
                <ListItem>
                    <CheckBox onPress={() => console.log('pressed')} />
                    <Text style={styles.bodyTextOptions}>{value.name}</Text>
                </ListItem>
            </TouchableOpacity>
        ))}
    </Form>
</Content>

TouchableOpacity未在Expo上触发本机反应

3 个答案: