Question

我在这方面花费了太多，所以这里有另一个CSS问题：我想有一个带有textInput字段的NavigationBar，它跨越整个栏。 onFocus它切换到搜索组件，在那里将发生魔术。同样在Search-Component中，我想在TextInput的左侧出现一个“Go-Back”箭头。与Quora类似：

切换自

到此：

问题是我无法正确使用CSS（或者我认为这是问题所在）。我把这个Navigator放在一起：

    <Navigator
            style={styles.container}
            initialRoute={{
              name: 'QuestionList',
              component: QuestionList
            }}
            renderScene={this.renderScene.bind(this)}
            navigationBar={
                            <Navigator.NavigationBar
                              style={ styles.nav }
                              sceneStyle={{marginTop:40}}
                              routeMapper={{
                                LeftButton(route, navigator, index, navState) {
                                  if(route.name == 'QuestionDetail') {
                                    return (
                                      <TouchableHighlight
                                         underlayColor="transparent"
                                         style={{ marginLeft:13,  marginTop:2}}
                                         onPress={() => { if (index > 0) { navigator.pop() } }}>
                                        <Text style={ styles.leftNavButtonText }>Back</Text>
                                      </TouchableHighlight>
                                    )}
                                    else { return null }
                                },
                                RightButton(route, navigator, index, navState) {

                                },
                                Title(route, navigator, index, navState) {
                                  if(route.name=='QuestionDetail' || route.name=='QuestionList'){
                                  return   <TextInput
                                      style={{flex:1, backgroundColor:'grey'}}
                                      onFocus={() => {navigator.push({name: Search}) }}
                                      placeholder='Ask...' />
                                  }
                                  else{return null}
                                }
                              }}
                            />
                        }
        />

使用样式表：

container: {
  flex:1
},
nav: {
  backgroundColor:'#e5e5e5',
  height:40,
  flex:1,
  flexDirection: 'row',
  alignItems: 'flex-start',
   shadowColor: "rgba(0, 0, 0, 0.3)",
   shadowOpacity: 1,
   shadowRadius: 1,
   zIndex: 1,
   shadowOffset: {
     height: 1,
     width: 0,
 },

但我总是得到这样的东西（背景着色只是为了显示错误的对齐方式）：

感谢您的帮助 - 我确信这是微不足道的： - /

React-native：在Navigator.NavigationBar

0 个答案: