React native 将样式设置为react native中navigationOption内的自定义组件

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

学生：我可以这样做吗？我这样做对吗？这是正确的处理方法吗

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;

class WorkoutScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索文本：“
};
}
componentDidMount（）{
this.props.navigation.setParams({
searchWorkouts:this.searchWorkoutHandler，
onChangeSearchText:this.onChangeSearchTextHandler，
searchText:this.state.searchText
});
}
//关于更改搜索文本
onChangeSearchTextHandler=值=>{
这是我的国家({
searchText:值
});
this.props.navigation.setParams({
searchText:值
});
};
//搜索训练
SearchWorkAuthHandler=（）=>{
警惕（“搜索训练”）；
};
render（）{
返回(
我在这里
);
}
静态导航选项=（{navigation}）=>{
const{params={}}=navigation.state；
返回{
标题：(
params.onChangeSearchText（值）}
onPress={（）=>params.searchWorkouts（）}
/>
),
headerTitleStyle:{width:“100%”，alignItems:“center”}，
头型：{
paddingRight:10，
paddingLeft:10
},
左校长：(
警报（“通知”）}
/>
),
头灯：(
警报（“添加新单击”）}
/>
)
};
};
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
滚动视图：{
背景颜色：“ffffff”
},
搜索输入：{
身高：45，
颜色：“灰色”，
尺寸：18
}
});
导出默认工作屏幕；

---

我怎样才能克服这个问题？

您遇到了什么错误？。发布错误消息。您需要为

SearchInput

组件添加代码并发布错误消息。伙计们，我通过这样做修复了它。我已经把我的密码放在这里了。我想知道，这是否是实现这一目标的最佳途径。谢谢。

默认样式可以在定义
自定义组件的地方定义，其他样式可以基于
屏幕道具添加，并合并到
自定义组件的样式中。
谢谢Pritish的回答