Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to use react native Picker with mobX-react (6.3.1)

$
0
0

I'm new to MobX and I need to use old version of this (6.3.1).Can you explain me right way to use it?I have Picker, but when this value change - there is no update on the screen. But variable have new value.

import React, { Component } from "react";import { collection } from "@cuba-platform/react-core";import {  ActivityIndicator,  ScrollView,  StyleSheet,  Text,  View,} from "react-native";import { PredefinedView } from "@cuba-platform/rest";import { observer } from "mobx-react";import { colors } from "../styles/palette";import { StmObj, StmObjView } from "../cuba/entities/pros_StmObj";import { Table, TableWrapper, Row } from "react-native-table-component";import { Picker } from "@react-native-picker/picker";const styles = StyleSheet.create({  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "#fff" },  header: { height: 50, backgroundColor: "#537791" },  text: { textAlign: "center", fontWeight: "100" },  dataWrapper: { marginTop: -1 },  row: { height: 100, backgroundColor: "#E7E6E1" },});@observerexport class TelemetryTable extends Component {  usersData = collection<StmObjView<"_local">>(StmObj.NAME, {    view: PredefinedView.LOCAL,    limit: 5,  });  setRowCountValues(rowCounterNew: any) {    this.state.rowCounter = rowCounterNew;    console.log(      this.state.rowCounter +"call change value function" + rowCounterNew    );  }  constructor(props) {    super(props);    this.state = {      rowCounter: 25,      tableHead: ["Название","Код Naumen","Адресподоговору","Ид. висточнике","Инвентарныйномер","Координаты","ИДПУСТМ","Периодичностьопроса",        // "Обсл. подразделение",        // "Комментарий",        // "Код",        // "Серийныйномер",        // "АдресФИАС",        // "Модельсистемытелеметрии",        // "УУГ",        // "Пультстм",        // "Датавводавэксплуатацию",        // "СпособпередачиданныхнаПУ",        // "Времяопроса",      ],      widthArr: [150, 100, 120, 100, 100, 90, 90, 120],    };  }  render() {    const { status, items } = this.usersData;    if (status !== "DONE") {      return <ActivityIndicator color={colors.textPrimary} />;    }    const state = this.state;    const tableSTMData = [];    const tableData = [];    for (let i = 0; i < items.length; i += 1) {      const rowData = [];      for (let j = 0; j < 8; j += 1) {        if (j === 0) rowData.push(items[i].name);        if (j === 1) rowData.push(items[i].alterCode);        if (j === 2) rowData.push(items[i].address);        if (j === 3) rowData.push(items[i].orig);        if (j === 4) rowData.push(items[i].alterSecondCode);        if (j === 5) rowData.push(items[i].location);        if (j === 6) rowData.push(items[i].stmDeskId);        if (j === 7) rowData.push(items[i].surveyFrequency);      }      tableData.push(rowData);    }    return (<><Text>Показыватьстрок</Text><Picker          mode="dropdown"          selectedValue={state.rowCounter}          onValueChange={(val, key) => this.setRowCountValues(val)}><Picker.Item label="1" value={1} key={0} /><Picker.Item label="25" value={25} key={1} /><Picker.Item label="50" value={50} key={2} /><Picker.Item label="100" value={100} key={3} /><Picker.Item label="Всезаписи" value={10000} key={4} /></Picker><ScrollView horizontal={true}><View><Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}><Row                data={state.tableHead}                widthArr={state.widthArr}                style={styles.header}                textStyle={styles.text}              /></Table><ScrollView style={styles.dataWrapper}><Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}>                {tableData.map((rowData, index) => (<Row                    key={index}                    data={rowData}                    widthArr={state.widthArr}                    style={[                      styles.row,                      index % 2 && { backgroundColor: "#F7F6E7" },                    ]}                    textStyle={styles.text}                  />                ))}</Table></ScrollView></View></ScrollView></>    );  }}

When I call setRowCountValues, it is work and change variable in state. I was thinking it will automaticly rerender. But on screen there is still no change value in Picker.Tried to use @action from mobX(not mobX-react), but it's no effect there. Mostly all guides for mobx I have found about newer version of it, or maby I'm not understanding somethink. Please help to figure it out.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>