React Native многократно используемый компонент редактирования - PullRequest
Новая
       11

React Native многократно используемый компонент редактирования

1 голос
/ 09 июля 2019

Я пытаюсь создать компонент многократного использования в реагировать родной.Идея состоит в том, чтобы только один компонент отвечал за редактирование всех полей, которые у меня есть.

Основной компонент 

...
constructor(props) {
    super(props);
    this.state.FirstName = 'Joe'
  }
...
const { FirstName } = this.state.FirstName;
<TouchableOpacity
    onPress={() =>
       NavigationService.navigate('EditData', {
           label: 'First Name',
           initialValue: FirstName,
           onSubmit: (FirstName) => this.setState({ FirstName })
       })
    }
>
    <CardItem>
        <Left>
            <FontAwesome5 name="user-edit" />
            <Text>First Name</Text>
        </Left>
        <Right>
            <Row>
                <Text style={styles.valueText}>{FirstName}   </Text>
                <Icon name="arrow-forward" />
            </Row>
        </Right>
    </CardItem>
</TouchableOpacity>
// Keep doing the same for other fields

Затем компонент редактирования должен использоваться повторно. 

constructor(props) {
    super(props);

    // callback function
    this.onSubmit = props.navigation.getParam('onSubmit');
    // label/value
    this.state = {
      label: props.navigation.getParam('label'),
      value: props.navigation.getParam('initialValue')
    };
  }

  render() {
    const { onSubmit } = this;
    const { label, value } = this.state;

    return (
      <Container>
        <Header />
        <Content>
          <Item floatingLabel style={{ marginTop: 10 }}>
            <Label>{label}</Label>
            <Input
              value={value}
              onChangeText={val => this.setState({ value: val })}
            />
          </Item>
          <Button
            onPress={() => {
              onSubmit(value);
              NavigationService.navigate('TenantDetails');
              }
            }
          >
            <Text>OK</Text>
          </Button>
        </Content>
      </Container>
    );
  }

При возврате к основному компоненту значение имени не изменилось.

Мой NavigationService на случай, если это может быть проблемой: 

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

Спасибо

1 Ответ

1 голос
/ 09 июля 2019

Вы можете передать обратный вызов вашему новому компоненту, который обрабатывает это.Новый компонент будет начинаться с состояния с установленным initialValue.Похоже, вы могли бы использовать react-navigation, поэтому я бы порекомендовал, если вы хотите, чтобы этот компонент на его собственном экране вы могли сделать 

this.navigation.navigate('SetValueScreen', {
  initialValue: this.state.email,
  onSubmit: (email) => this.setState({ email })
})

и на SetValueScreen получить initialValue в конструкторе и в рендереиспользуйте обратный вызов 

class SetValueScreen extends React.PureComponent{
  constructor(props){
    super(props)

    this.onSubmit = props.navigation.getParam('onSubmit');

    this.state = {
      value: props.navigation.getParam('initialValue')
    }
  }

  render(){
    const { onSubmit } = this
    const { value } = this.state

    return (
      ...    
      <Right>
        <TextInput value={value} onChangeText={(value) => setState({ value })} />
      </Right>
      <Button onPress={() => {
        onSubmit(value)
        navigation.goBack()
      }} >
        OK
      </Button>
      ...
    )
  }
}

Надеюсь, это поможет.

...