如何通过单击图标警报来响应本机按钮 ('OK')

Question

如何通过单击图标警报来响应本机按钮 ('OK')，我想放置三点垂直谢谢...


export default [
  {
    _id: '1001',
    name: 'Weeks',
    one: 'Monday',
    two: 'Tuesday',
    three: 'Wednesday',
    four: 'Thursday',
    five: 'Friday',
    six: 'Saturday',
    seven: 'Sunday',
  },


export default (props) => {
  const {object} = props.route.params;
  const {textContainer} = styles;

  return (
    <ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
          <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
        ))}
    </ScrollView>
  );
};

look picture here dot-three-vertical icon example

Answer 1

如果您询问如何实现并使其显示在右侧，如果您使用的是 expo，则可以从 expo 矢量图标导入正确的图标包，如下所示：

import { SimpleLineIcons } from '@expo/vector-icons';

然后像这样创建滚动视图：

<ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
        <View style={styles.listItem}>
        <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
          
          <SimpleLineIcons name="options-vertical" size={24} color="red" />
        </View>
          
        ))}
    </ScrollView>
    
    
    const styles = StyleSheet.create({
    listItem : {
    padding : 10,
    flexDirection : "row",
    justifyContent : "space-between",
    alignItems : "center"
    }
    })

你可以在图标上添加一个 onPress 监听器来做任何你想做的事情。如果要显示警报，请使用 Alert.alert() 并根据需要进行配置。

Answer 2

Thank you so much;

<ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
        <View style={styles.listItem}>
        <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
          
          <SimpleLineIcons name="options-vertical" size={24} color="red" />
        </View>
          
        ))}
    </ScrollView>
    
    
    const styles = StyleSheet.create({
    listItem : {
    padding : 10,
    flexDirection : "row",
    justifyContent : "space-between",
    alignItems : "center"
    }
    })

如何通过单击图标警报来响应本机按钮 ('OK')

How to do react native button by clicking icon alert ('OK')

reactjs

react-native

expo

react-icons