Блог

В настоящее время я использую SwipeListView и сохраняю осязаемую область над текстовыми элементами, чтобы она перенаправлялась на страницу заказов, как только пользователь нажмет на нее.

Но стиль не так уж хорош.Поскольку я просто сохранял вкладки или пробелы после каждого текстового значения.

Если я сохраняю несколько текстов, они просто отображаются в разных столбцах, тем самым не в том формате, который я ожидаю, а в табличном.

Есть ли в любом случае хороший код стиля, который вы предлагаете для приведенных ниже элементов SwipeListView. Я хочу показать в табличном формате со столбцами вверху и одинаковым промежутком между значениями. И раскраска значений на основе условия, чтобы я мог показывать зеленый или красный цвет на основе или убытка или прибыли. СНС

Это текущий пользовательский интерфейс.

И код: Моя основная составная часть:

 return (
    <View style={styles.container}>
      <View style={styles.formContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add new coin"
          placeholderTextColor="#aaaaaa"
          onChangeText={(text) => setCoinText(text)}
          value={coinText}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
        />
        <TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableOpacity>
      </View>
      {coins amp;amp; (
        <SwipeListView
          data={coins}
          keyExtractor={(item) => item.id}
          renderItem={renderCoin}
          removeClippedSubviews={true}
        />
      )}
    </View>
  );
}
 

Мой метод рендеринга:

  const renderCoin = ({ item, index }) => {
    console.log("---Inside render coin---"   item.text);
    let { averagePrice, totalCost, totalCount } = orderListData(
      item.text,
      userID,
      orders
    );
    //let marketPrice = goForAxios(item.text);
    //console.log(`${item.text} = ${marketPrice}`);
    return (
      <View style={[styles1.rowFront, { flexDirection: "row" }]}>
        <TouchableWithoutFeedback
          onPress={() =>
            props.navigation.navigate("Orders", {
              coin: item.text,
              userID: userID,
            })
          }
          style={{ flex: 1 }}
        >
          <Text>
            {item.text} {round(averagePrice)} {round(totalCost)}{" "}
            {round(totalCount)}
          </Text>
        </TouchableWithoutFeedback>
        <MarketPrice coin={item.text} />
        <TouchableOpacity
          onPress={() => onDeleteCoin(item.id)}
          style={{ flex: 1 }}
        >
          <Icon name={"trash"} size={30} color="#900" />
        </TouchableOpacity>
      </View>
    );
  };