Question

我试图在react native中创建一个可重用的组件。想法是只有一个组件负责编辑我拥有的所有字段。

主要组件

...
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,
};

谢谢

Answer 1

您可以将回调传递给处理此问题的新组件。新组件将从设置了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>
      ...
    )
  }
}

我希望这会有所帮助。

React Native可重用的编辑组件

1 个答案: