在Android版wix react-native-navigation v2的顶部栏上放置一个TextField

Question

我想使用wix的react-native-navigation将文本字段用作导航堆栈顶部栏上的搜索字段。 这个软件包确实功能强大，但是它缺少适当的文档，因为我不得不遍历源代码来理解一些令人讨厌的东西。

这是我追求的目标的一个示例：

应该属于topBar的SearchBar组件上的backgroundColor为红色，因此很容易看到，并显示为一个很小的文本字段！如何正确渲染？

Navigation.registerComponent("venty.SearchBarComponent", () => SearchBar );
Navigation.registerComponent("venty.SearchBarScreen", () => SearchBarScreen );

..

export default class SearchBar extends Component {
  render () {
    return (
      <View style={styles.container}>
          <DefaultInput style={styles.textfield}
            placeholder="search"
          />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 5,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-start",
    backgroundColor: "red"
  },
  textfield: {
    flex: 1,
    marginRight: 0,
    marginLeft: 0,
    borderRightColor: 'white',
    borderLeftColor: 'transparent'
  }
});

..

export default class SearchBarScreen extends Component {

  static options(passProps) {
    return {
      topBar: {
        title: 
          {
            component: {
              id: 'searchBarHeader',
              name: "venty.SearchBarComponent",
              alignment: "fill"
            },
            alignment: "fill"
          },
        leftButtons: [],
        rightButtons: []
      }
    };
  }
  constructor(props) {
    super(props);
  }
  render () {
    return (
      <View style={styles.container}>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-start"
  }
});