Question

如果你有一个表单组件，你如何处理案例，你需要使用导航栏中的按钮提交组件状态的一部分？

const navBtn = (iconName, onPress) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.iconWrapper}
  >
    <Icon name={iconName} size={cs.iconSize} style={styles.icon} />
  </TouchableOpacity>
)

class ComponentName extends Component {

  static navigationOptions = {
    header: (props) => ({
      tintColor: 'white',
      style: {
        backgroundColor: cs.primaryColor
      },
      left: navBtn('clear', () => props.goBack()),
      right: navBtn('done', () => this.submitForm()), // error: this.submitForm is not a function
    }),
    title: 'Form',
  }

  constructor(props) {
    super(props);
    this.state = {
      formText: ''
    };
  }

  submitForm() {
    this.props.submitFormAction(this.state.formText)
  }

  render() {
    return (
      <View>
        ...form goes here
      </View>
    );
  }
}

Answer 1

简单设计模式

作为@ val的优秀答案的后续跟踪，这里是我如何构建我的组件，以便所有参数都设置在protocol Convertible{ associatedtype T func convert() -> T } class ACoreData: Convertible{ var b: BCoreData? func convert() -> A { var a = A() a.b = self.b?.convert() return a } } class BCoreData: Convertible{ var a: ACoreData? func convert() -> B { var b = B() b.a = self.a?.convert() return b } } class A{ var b: B? } class B{ var a: A? }中。我发现这使得它更简单，并且是所有其他屏幕的简单模式。

componentWillMount

Answer 2

使用setParams发送带绑定的功能，然后您就可以访问该功能中的组件state。

示例：

constructor(props) {
    super(props);
    this._handleButtonNext = this._handleButtonNext.bind(this);
    this.state = { selectedIndex: 0 }
}

componentDidMount() {
    this.props.navigation.setParams({
        handleButtonNext: this._handleButtonNext,
    });
}

_handleButtonNext() {
    let action = NavigationActions.setParams({
        params: { selectedImage: images[this.state.selectedIndex] }
    });
    this.props.navigation.dispatch(action);
}

现在你可以拥有一个与组件state相关的按钮处理程序。

static navigationOptions = ({ navigation }) => {
    const { state, setParams, navigate } = navigation;
    const params = state.params || {};

    return {
        headerTitleStyle: { alignSelf: 'center' },
        title: 'Select An Icon',
        headerRight: <Button title='Next' onPress={params.handleButtonNext} />
    }
}

Answer 3

在componentDidMount上，您可以使用

this.navigation.setParams({
 myTitle: this.props.myTitle
})

然后，将函数传递给静态道具上的标题。此功能可以访问您之前设置的参数

感谢rafaelcorreiapoli

Answer 4

您收到此错误是因为您在声明constructor()之前使用道具和州。在构造函数中，我们首先调用super（props），以便我们可以在组件中使用props。请执行以下操作以获得所需的结果。

constructor(props) {
    super(props);
    this.state = {
      formText: ''
    };

  static navigationOptions = {
    header: (props) => ({
      tintColor: 'white',
      style: {
        backgroundColor: cs.primaryColor
      },
      left: navBtn('clear', () => props.goBack()),
      right: navBtn('done', () => this.submitForm()), // error: this.submitForm is not a function
    }),
    title: 'Form',
  }
  }

干杯：）

React-native / react-navigation：如何从`static navigationOptions`访问组件的状态？

4 个答案:

简单设计模式