reactjs – React-native / react-navigation：如何从`static na

发布时间：2020-12-15 20:53:27 所属栏目：百科来源：网络整理

导读：例如,当您拥有表单组件时,如何使用导航栏中的按钮提交组件状态的一部分？ const navBtn = (iconName,onPress) = ( TouchableOpacity onPress={onPress} style={styles.iconWrapper} Icon name={iconName} size={cs.iconSize} style={styles.icon} / /Touchab

例如,当您拥有表单组件时,如何使用导航栏中的按钮提交组件状态的一部分？

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>
    );
  }
}

使用setParams发送绑定函数,然后您将可以访问该函数中的组件状态.

例：

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);
}

现在,您可以拥有与组件状态相关的按钮处理程序.

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} />
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!