Помещение TextField на верхней панели в WIX реагировать на родную навигацию v2 для Android - PullRequest
Новая
       41

Помещение TextField на верхней панели в WIX реагировать на родную навигацию v2 для Android

0 голосов
/ 31 января 2019

Я бы хотел поместить текстовое поле в качестве поля поиска на верхней панели моего стека навигации, используя response-native-navigation by wix.Этот пакет действительно мощный, но ему не хватает надлежащей документации, так как мне пришлось пройтись по исходному коду, чтобы понять некоторые вещи, которые действительно раздражают.

Вот пример того, к чему я стремился:

backgroundColor для компонента SearchBar, который должен принадлежать topBar, имеет красный цвет, поэтому его легко увидеть, и он отображается в видетекстовое поле крошечного размера !!Как я могу сделать это правильно? 

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