React Native Update 选择器值，除了带有 ref 的组件

Question

我是 React/Native 的新手，这个问题让我很头疼。我正在使用一个名为 react-native-image-picker-form 的库，它非常好，让我们使用你的 phone 相机，或者你可以从你的相册中选择一张照片。

让我给你看代码

import React, {Component} from 'react'
import {Text, View, TouchableOpacity, Picker} from 'react-native'
import t from 'tcomb-form-native'
import ImageFactory from 'react-native-image-picker-form';

const Form = t.form.Form;
const DocumentFormStruct = t.struct({
  image: t.String
});

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        form: null,
      value: null,
        language: 'PERMISO ESPECIAL',
      options: {
        fields: {
          image: {
            config: {
              title: 'Select image',
              options: ['Open camera', 'Select from gallery', 'Cancel'],
              // Used on Android to style BottomSheet
              style: {
                titleFontFamily: 'Roboto'
              }
            },
            error: 'No image provided',
            factory: ImageFactory
          }
        }
      },
        changed: false
    };
  }

  onPress = () =>{
      if (this.form == undefined){
        console.log("UNDEFINED");
      }else {
          console.log(this.form.getValue());
      }
  }

  componentDidMount() {
      // var value = this.form.getValue();
      // console.log(value);
  }

  shouldComponentUpdate(nextProps, nextState) {
      return false;
  }

    render() {
    return (
        <View>
            <Form
                ref={(ref: any) => {
                    this.form = ref
                }}
                type={DocumentFormStruct}
                value={this.state.value}
                options={this.state.options}
            />

            <Picker
                selectedValue={this.state.language}
                onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                <Picker.Item label="PERMISO ESPECIAL"
                             value="PERMISO ESPECIAL"/>
                <Picker.Item label="PERMISO HOJA CLARO" value="HOJA CLARO"/>
                <Picker.Item label="COORDINAR CON PROPIETARIO"
                             value="COORDINA CON PROPIETARIO"/>
            </Picker>

            {this.state.language == 'HOJA CLARO'
                ?
                <View>
                    <Text>Hello World!</Text>
                </View>
                :
                null
            }

            <TouchableOpacity
                onPress={this.onPress}
            >
                <Text> Touch Here </Text>
            </TouchableOpacity>
        </View>
    )
  }
}

我知道使用 shouldcomponentupdate 可以防止不必要的重新渲染。问题是这个库必须使用这个 ref 属性，当任何其他值的状态发生变化时，所选图片将变为空。有没有办法或解决方法。如果我使用 shouldcomponentupdate 那么选择器的值不会改变，但至少我得到了图像选择器的当前值。

Answer 1

解决方法是利用 Form 的 onChange 属性。 (See docs)

<Form
    ref={(ref: any) => {
      this.form = ref
    }}
    type={DocumentFormStruct}
    value={this.state.value}
    options={this.state.options}
    onChange={this.onChange}
/>

在您的 onChange 方法中，将值保存在本地状态。

onChange = (value) => {
    this.setState({value});
}

现在，即使它像你说的那样重新初始化，它也会从本地状态中获取值，而不会变为空。

React Native Update 选择器值，除了带有 ref 的组件

React Native Update picker value except a component with ref

ref

reactjs

react-native