我想呈现这个iniReact Native与每个按钮应响应每次点击与每个按钮

oxiaedzo 于 2023-03-24 发布在 React

关注(0)|答案(1)|浏览(72)

下面是代码。它得到了渲染到4次循环和12次循环每个。
buka是8，tutup是20。我想让它每个按钮都是交互式的。

for (let i = buka; i <= tutup; i++) {
    for (let j = 0; j < data.length; j++) {
      const item = data[j];
      jam.push(
        <TouchableOpacity
          style={{
            borderRadius: 16,
            backgroundColor: '#161616',
            width: 93,
            height: 77,
            justifyContent: 'center',
            alignItems: 'center',
            marginHorizontal: 17 / 2,
            marginVertical: 8,
            borderWidth: 2,
            borderColor: i === item.clock_time ? '#C4F601' : '#000000',
          }}
          key={i}
          onPress={handlePress[i]}>
          <View>
            <Text style={[styles.heading14, {color: '#FFFFFF'}]}>{i}.00</Text>
            <Text
              style={[styles.heading14, {color: '#FFFFFF', fontWeight: '400'}]}>
              {i === clockTime ? 'terisi' : 'tersedia'}
            </Text>
          </View>
        </TouchableOpacity>,
      );
    }
  }

return (
<View style={styles.container}> {jam.map((number, index) => (
<View key={index}>{number}</View>
))}
</View>

我想把它做成这样

react-native

来源：https://stackoverflow.com/questions/75788323/i-want-to-render-this-ini-react-native-with-each-button-should-be-response-each

1条答案

按热度按时间

nzrxty8p1#

下面是一些代码，注意：这段代码创建框直到底部，需要一些修复，以遵循您的期望，但这个框遵循您的要求

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

//let jam = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const data = [8, 9];

export default function App() {
  const [jam, setJam] = React.useState([]);
  const buka = 8;
  const tutup = 20;

  const fillData = (buka, tutup) => {
    let arrjam = [];
    for (let i = buka; i <= tutup; i++) {
      arrjam.push(i);
    }
    setJam(arrjam);
  };
  
  const Item = ({ number, selected = false }) => {
    return (
      <TouchableOpacity
        style={{
          borderRadius: 16,
          backgroundColor: '#161616',
          width: 93,
          height: 77,
          justifyContent: 'center',
          alignItems: 'center',
          marginHorizontal: 17 / 2,
          marginVertical: 8,
          borderWidth: 2,
          borderColor: selected ? '#C4F601' : '#000000',
        }}
        key={number}
        // onPress={handlePress[i]}
      >
        <View>
          <Text style={[styles.heading14, { color: '#FFFFFF' }]}>
            {number}.00
          </Text>
          <Text
            style={[styles.heading14, { color: '#FFFFFF', fontWeight: '400' }]}>
            {selected ? 'terisi' : 'tersedia'}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  React.useEffect(() => {
    fillData(buka, tutup);
  });

  return (
    <View style={styles.container}>
      {jam.map((number, index) => (
        <>
          {data.includes(number) ? (
            <>
              <Item key={index} number={number} selected={true} />
            </>
          ) : (
            <Item key={index} number={number} />
          )}
        </>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

演示https://snack.expo.dev/pIm9ki1Wh

赞(0）回复(0）举报 2023-03-24