将样式设置为navigationOption中的自定义组件

时间:2018-05-08 11:32:17

标签: react-native

我想为自定义组件设置样式,在native native中的navigationOptions中。但这种st不起作用,它会给出一个错误的说法。相同的样式在同一屏幕的另一个文本框中工作。

P:S:我能做到这一点吗?我这样做是对的吗?这是处理这个问题的正确方法吗?

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

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

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

  // on change search text
  onChangeSearchTextHandler = value => {
    this.setState({
      searchText: value
    });
    this.props.navigation.setParams({
      searchText: value
    });
  };

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

  render() {
    return (
      <View style={styles.container}>
        <Text>Im Here</Text>
      </View>
    );
  }

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

    return {
      headerTitle: (
        <SearchInput
          style={styles.searchInput}
          value={params.searchText}
          source={Search}
          borderRadius={50}
          placeholder="Search / Filter"
          onChangeText={value => params.onChangeSearchText(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")}
        />
      )
    };
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollView: {
    backgroundColor: "#ffffff"
  },
  searchInput: {
    height: 45,
    color: "gray",
    fontSize: 18
  }
});

export default WorkoutScreen;

我怎样才能克服这个?

0 个答案:

没有答案