如何在本机中访问导航选项中的组件状态？

Question

我想在navigationOptions中访问我的组件状态.我试图将它分配给componentDidMount中的params.它仍然没有用.如何设置this.state.SearchText作为navigationOptions内输入的值？

export default class WorkoutScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchText: "Test Text"
    };
  }

  componentDidMount() {
    this.props.navigation.setParams({
      searchWorkouts: this.searchWorkoutHandler
    });
  }

  onChangeSearch = value => {
    this.setState({
      searchText: value
    });
  };

  searchWorkoutHandler = () => {
    alert("Searching Workouts");
  };

  render() {
    return (
      <View>
        <Text style={styles.searchInput}>{this.state.searchText}</Text>
      </View>
    );
  }

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    alert(params.searchText);

    return {
      headerTitle: (
        <SearchInput
          style={styles.searchInput}
          value={params.searchText}
          source={Search}
          borderRadius={50}
          placeholder="Search / Filter"
          onChangeText={value => this.onChangeSearch(value)}
          onPress={() => params.searchWorkouts()}
        />
      ),
      headerTitleStyle: { width: "100%", alignItems: "center" },
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      },
      headerLeft: (
        <ClickableIcon
          source={Bookmark}
          onIconPressed={() => alert("Notifications Clicked Workout")}
        />
      ),
      headerRight: (
        <ClickableIcon
          source={Movements}
          onIconPressed={() => alert("Add New Clicked")}
        />
      )
    };
  };
}

有什么标准方法可以用来实现这个目标吗？

Answer 1

this.props.navigation.setParams只要状态发生变化,您就需要调用以更新params值navigationOptions:

componentDidMount() {
  this.props.navigation.setParams({
    searchWorkouts: this.searchWorkoutHandler,
    searchText: this.state.searchText,
  });
}

onChangeSearch = (value) => {
  this.setState({
    searchText: value,
  });
  this.props.navigation.setParams({
    searchText: value,
  });
};